字符串的扩展和新增方法

模板字符串

使用方法，不赘述：

let param = 123;
let str = `str ${param} str str`;

标签模板

使用如下：

tag`str ${param} str`

比如：

let a = 1, b = 2;
tag`abc ${ a + b } efg ${ a - b }`
// 等同于
tag(['abc', 'efg', ''], 3, -1);

也就是说tag其实就是一个方法名，而这个方法接收一种固定的格式的参数，第一个参数是模板字符串里的字符串，最后（或者最前）有个空字符串（取决于模板字符串最开始或最后是否有变量），然后剩余的是对应位置的变量。

function myUpper(strs) {
  return strs.map(str => str.toUpperCase()).join(" ")
}
myUpper`hello world abc`; // HELLO WORLD ABC

let a = 1;
console.log`${a} hello` // ['', 'hello'] 1
// 相当于调用了
console.log(['', 'hello'], 1);

之所以说是标签，用法中在每个模板字符串的前面加了个函数名，像是打了个标签（函数名最好起得一看就知道是干嘛的）。

新增方法

主要记录一些较常用到的方法。

includes(str, startIndex?)
startsWith(str, startIndex?)
endsWith(str, startIndex?)
repeat(count)
padStart(length, str)
padEnd(length, str)
trimStart()
trimEnd()
replaceAll()

includes, startsWith, endsWith

这几个方法可以用来查询，第二个参数表示从某个字符串的索引开始查。

// includes判断字符串中是否有符合格式的子字符串
// startsWith判断字符串的开头是否有符合格式的子字符串
// endsWith判断字符串的结尾是否有符合格式的子字符串
let str = 'abc efg hij';
console.log(str.includes('efg')); // true
console.log(str.startsWith('abc')); // true
console.log(str.endsWith('hij')); // true

repeat

重复某个字符串n次，如果是小数，向下取整。n的取值范围为(-1, Infinity)，即在-1和正无穷之间，不包含边界值。

let str = 'abc';
str.repeat(2); // 'abcabc'

padStart, padEnd

填充字符串。padStart用于头部补全，padEnd用于尾部补全。

let str = 'abc';
console.log(str.padStart(2, 'x')); // 'abc'，位数够了，不做补全操作
console.log(str.padStart(5, 'x')); // 'xxabc'
console.log(str.padEnd(5, 'x')); // 'abcxx'

比如我们常见的月份格式，在只有一位时需要补0，便可以padStart(2, '0')

trimStart, trimEnd

trimStart消除头部空格，trimEnd消除尾部空格。

replaceAll

str.replaceAll(带g的正则/字符串, '替换内容')

let str = 'helloXworldXabc';
console.log(str.replaceAll('X', '_')); // hello_world_abc
console.log(str.replaceAll(/X/g, '_')); // hello_world_abc 不带g会报错

replaceAll第二个参数可以是一些特殊字符串

- $&：匹配的字符串。
- $` ：匹配结果前面的文本。
- $'：匹配结果后面的文本。
- $n：匹配成功的第n组内容，n是从1开始的自然数。这个参数生效的前提是，第一个参数必须是正则表达式。
- $$：指代美元符号$。

let str = '123345';
// 第一个3之前的是'12'，此时变成'1212345'；第二个3之前的内容（针对原字符串）是'123'，'121212345'
console.log(str.replaceAll('3', '$`')); //121212345   

// 第一个3后面是'345'，此时变成'12345345'，第二个3后面是'45'，此时变成'123454545'
console.log(str.replaceAll('3', `$'`)); // 123454545

【重学前端】ECMAScript6 - 字符串的扩展和新增方法