目录
ES6以往文章
ES6新增字符串方法:
includes()、startsWith()、endsWith()
repeat()
padStart()、padEnd()
常见用途
为数值补全指定位数
提示字符串格式
trimStart()、trimEnd()
String.raw()
ES6以往文章
ES6标准-【一】【学习ES6看这一篇就够了!!】-CSDN博客
ES6新增字符串方法:
includes()、startsWith()、endsWith()
传统上,JavaScript只有“indexOf”方法,可以用来确定一个字符串是否包含在另一个字符串中,ES6又提供了三种新方法:
- includes():返回布尔值,表示是否找到了参数字符串
- startsWith():返回布尔值,表示参数字符串是否在原字符串的头部
- endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部
let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
<script>
let s = 'Hello world!';
console.log(s.startsWith('Hello'));
console.log(s.endsWith('!'));
console.log(s.includes('o'));
</script>
效果:
这三个方法都支持第二个参数,表示开始搜索的位置:
下标索引从“0”开始,第一个字符的下标为“0”
- 使用第二个参数n时,endsWiths的n表示只搜索“前n个字符”
- includes和startsWiths表示“从第n个字符开始搜索”
let s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
repeat()
repeat(n)方法返回一个新字符串,表示将原字符串重复n次
- n只能是正数,如果是负数或者Infinity就会报错!!!!
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
参数如果是小数,会被取整:
取整只是“简单忽略小数点”
'na'.repeat(2.9) // "nana"
'na'.repeat(2.1) // "nana"
如果repeat的参数是“0”到“-1”之间的小数,等同于0
'na'.repeat(-0.9) // ""
参数NaN等同于0
'na'.repeat(NaN) // ""
如果repeat的参数是字符串,则会先转换成数字
- 如果参数是一个字符字符串,则等同于“0”
- 如果参数是一个数字字符串,则等同于同等的数字,例如“100”相当于100
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"
<script>
console.log('na'.repeat('xzcxzca'));//相当于repeat(0)
console.log('na'.repeat('2'));//相当于repeat(2)
console.log('na'.repeat('-0.9'));//相当于repeat(0)
console.log('na'.repeat('@#$!'));//相当于repeat(0)
</script>
padStart()、padEnd()
如果某个字符串不够指定长度,可以使用“padStart()”补全头部,“padEnd()”补全尾部
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
padStart()、padEnd() 一共接受两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来参与补全的字符串
如果用来补全的字符串与原字符串,两者的长度之和超过了最大长度,则会截去超出位数的补全字符串
<script>
console.log('abc'.padStart(10, '0123456789'));
console.log('abc'.padEnd(10, '0123456789'));
</script>
如果原字符串的长度,等于或大于最长长度,则字符串补全不生效,返回原字符串
'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'
如果省略第二个参数,默认使用“空格”补全参数
'x'.padStart(4) // ' x'
'x'.padEnd(4) // 'x '
常见用途
为数值补全指定位数
'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"
提示字符串格式
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
trimStart()、trimEnd()
ES6之前,trim()用来消除字符串两端空格,ES6后增加“trimStart()”消除字符串前端空格,“trimEnd()”消除字符串后端空格
- 它们返回的都是新字符串,不会修改原始字符串
const s = ' abc ';
s.trim() // "abc"
s.trimStart() // "abc "
s.trimEnd() // " abc"
- 除了空格键,对于tab键、换行符等不可见空白符号都有效
- trimLeft()和traimRight()分别是trimStart()和trimEnd()的别名
<script>
const s = ' abc ';
console.log(s.trim());
console.log(s.trimLeft());
console.log(s.trimStart());
console.log(s.trimRight());
console.log(s.trimEnd());
</script>
String.raw()
raw方法返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,往往用于模版字符串的处理方法
String.raw`Hi\n${2+3}!`
// 实际返回 "Hi\\n5!",显示的是转义后的结果 "Hi\n5!"
String.raw`Hi\u000A!`;
// 实际返回 "Hi\\u000A!",显示的是转义后的结果 "Hi\u000A!"
如果原字符串的斜杠已经转义,那么String.raw()会进行再次转义:
String.raw`Hi\\n`
// 返回 "Hi\\\\n"
String.raw`Hi\\n` === "Hi\\\\n" // true
String.raw()方法可以作为处理模版字符串的基本方法,它会将所有变量替换,并且对斜杠进行转义,方便下一步作为字符串来使用
String.raw()本质上是一个正常的函数,只是专用于模版字符串的标签函数,如果写成正常函数的形式,它的第一个参数,应该是一个具有raw属性的对象,其raw属性的值应该是一个数,对应模板字符串解析后的值
// `foo${1 + 2}bar`
// 等同于
String.raw({ raw: ['foo', 'bar'] }, 1 + 2) // "foo3bar"