ES6对于字符串的扩展
在字符串方面, ES6这次也是花了大心血了, 从新的Unicode编码到字符串的扩展方法到字符串的迭代接口, 新增了很多的新特性, 笔者在这里会挑一些自己觉得平时用的多的写一写
目录(标红代表比较重要):
-
includes()
-
startsWith() / endsWith()
-
repeat()
-
padStart() / padEnd()
-
模板字符串
includes(str, startIndex)
在ES5中如果我们要判定一个字符串中是否包含另一个字符串的话, 通常我们会使用indexOf, 如下
var str = 'helloWorld';
console.log(str.indexOf('hello')); // 输出0
console.log(str.indexOf('mine')); // 输出-1
// 如果为-1则代表false, 如果为true的话会直接返回包含字符串的索引
而在ES6中, 官方给我们提供了一个更加纯粹语义化也更加好的方法来判定一个字符串是否包含另一个字符串, 该方法就是includes
includes是字符串原型上的一个方法, 他接受的第一个参数为被检索的字符串, 同时如果找到了参数字符串则会返回true, 反之false
let str = 'helloWorld';
console.log(str.includes('hello')); // 输出true 检索str中是否包含'hello'字符串
console.log(str.includes('mine')); // 输出false
includes接收的第二个参数为一个索引值, 他表示从第几位开始检索(索引开始值为0, 代表从第0位开始查)
let str = 'helloWorld';
console.log(str.includes('hello', 0)); // true
console.log(str.includes('hello', 1)); // false
console.log(str.includes('World', 5)); // true
如果填的索引值小于0, 他也会从0开始, 如果大于索引最大值（length - 1）, 则直接返回false
let str = 'helloWorld';
console.log(str.includes('hello', -100)); // true
console.log(str.includes('d', 9)); // true
console.log(str.includes('d', 10)); // false
startsWith(str, startIndex) / endsWith(str, frontLength)
在推出includes的同时, 也顺带捎上了这俩哥们, startWith和endWith
startsWith(str, startIndex)
startsWith表示一个字符串是否是以另一个字符串开头
他接收的第一个参数就是被检索字符串, 如果确实是以被检索字符串开头返回true, 否则返回false
const str = 'helloWorld';
console.log(str.startsWith('hello')); // true
console.log(str.startsWith('he')); // true
console.log(str.startsWith('ell')); // false
他接收的第二个参数跟includes一样, 代表从第几位开始检索, 他的规则也与includes一样
const str = 'helloWorld';
console.log(str.startsWith('hello', -200)); // true
console.log(str.startsWith('d', 10)); // false
console.log(str.startsWith('he', 2)); // false
endsWith(str, frontLength)
endsWith表示一个字符串是否以另一个字符串结尾
同样, 这哥们也跑不掉的, 他第一个参数就是被检索字符串, 如果确实是以被检索字符串结尾返回true, 否则返回false
const str = 'helloWorld';
console.log(str.endsWith('World')); // true
console.log(str.endsWith('d')); // true
console.log(str.endsWith('hello')); //false
他也有第二个参数, 但是这哥们的第二个参数是代表前多少位, 填上第二个参数代表在前多少位之前的参数是否以被检索字符串结尾
const str = 'helloWorld';
console.log(str.endsWith('World', 10)); // true
console.log(str.endsWith('Wo', 6)); // false
console.log(str.endsWith('hello', 5)); // true
repeat()
调用原型上的repeat方法会返回一个新的字符串, 返回的新字符串是将调用这个方法的字符串重复n遍的结果
let str = 'cool';
let newStr = str.repeat(3);
console.log(newStr); // coolcoolcool
let secStr = str.repeat(); // 如果不传值返回空 ''
console.log(secStr);
let trdStr = str.repeat(1.5); // 如果传小数会被取整, 调用parseInt, 所以返回cool
console.log(trdStr);
let fthStr = str.repeat(0); // 写0也是返回空 ''
console.log(fthStr);
let fifthStr = str.repeat(-10); // 写负数直接报错: RangeError: Invalid count value
console.log(fifthStr);
如果传进去的是非数字, 会先将参数丢进Number中转化为数字, 如果转化后不是正常数字, 则返回空
let str = 'cool';
let newStr = str.repeat(true);
console.log(newStr); // cool
let secStr = str.repeat('abc');
console.log(secStr); // ''空
padStart(minLength, str) / padEnd(minLength, str)
ES7中推出了两个针对字符串补全的方法, padStart和padEnd
padStart(minLength, str)
如果调用该方法的字符串长度不够, 他将会从索引第0位开始补全
padStart接收的第一个参数为调用该方法字符串的最小长度, 第二个参数是用来进行补全的字符串
let str = 'o'; // 字符串长度为1
let newStr = str.padStart(5, 'hell');
console.log(newStr); //hello
如果进行补全的字符串长度 + 原始字符串长度已经大于第一个参数最小长度值, 则会对补全字符串进行裁剪
如果原始字符串长度就已经大于或者等于第一个参数最小长度值, 则直接返回原始字符串
let str = 'hello';
let newStr = str.padStart(7, 'World');
console.log(newStr); // Wohello
let secStr = 'hello';
let secNewStr = secStr.padStart(5, 'World');
console.log(secNewStr); // hello
let trdStr = 'hello';
let trdNewStr = trdStr.padStart(3, 'World');
console.log(trdNewStr); // hello
如果省略第二个参数, 则会用第一个空格补全
let str = 'hello';
let newStr = str.padStart(7);
console.log(newStr); // " hello"
padEnd(minLength, str)
padEnd所有规则与padStart一致, 唯一的区别就是padStart是从索引0位开始补全, 而padEnd是从最后一位开始补全
模板字符串
模板字符串是ES6对字符串提供的新特性中至今为止应用最广泛, 而且效果最显著的特性, 模板字符串的推出给我们提供了一种新的书写字符串的方式
在ES5中, 当我们在js中书写一个html模板的时候是比较吃力的如下
var words = 'helloWorld'
var htmlStr = "<div></span>" + words + "</span></div>" +
"<div>mine</div>";
如果好一点的在换行那可能整个转义字符, 但是无论是怎么写, 其实对于我们来说都很麻烦, 特别是处理比较复杂的又掺杂变量字符串
而ES6模板字符串的到来完全就是救世主, 模板字符串语法以反引号```````标识, 上方同样的html模板用模板字符串写法如下
let words = 'helloWorld';
let htmlStr = `<div>
<span>${words}</span>
</div>
<div>mine</div>`
就这样就成了, 完全不用一直拼接来拼接去, 想想如果是有个七八行字符串的拼接有模板字符串的话也不累了
模板字符串中的一些注意事项如下
- 模板字符串以反引号进行```````标识, 如果在模板字符串中需要使用反引号, 则要进行转义
const str = `hello \``;
- 在模板字符串中使用变量, 要将变量至于
${}标识符中
let name = 'loki';
let age = 18;
let stu = `学生姓名: ${ name }, 学生年龄: ${ age }`;
console.log(stu); // 输出： 学生姓名: loki, 学生年龄: 18
${}标识符中可以进行计算, 可以传入js表达式, 也可以进行函数的调用
let x = 10,
y = 20;
let calcStr = `${ x } + ${ y } = ${ x + y } `;
console.log(calcStr); // 10 + 20 = 30
let str = `${ x < y ? 'x < y' : 'x > y' }`;
console.log(str); // x < y
function foo() {
return '我是函数'
}
let funcStr = `${ foo() }`;
console.log(funcStr); // 我是函数
模板字符串还可以进行封装进行各种编译模板和标签模板的生成, 如果对这些感兴趣可以自己查查资料或者思考思考
至此, 一些ES6在字符串上新增的常用特性已经解释完毕了, 希望我都写清楚了
