JavaScript ES6 String 字符串新增方法
模板字面量
1console.log(`Hello, ${`World`}!`) // Hello, World!
所有插入的值都会使用 toString()强制转型为字符串：
1const foo = { toString: () => 'World' }
2console.log(`Hello, ${foo}!`) // Hello, World!
也可以插入自己之前的值：
1let value = ''
2function append() {
3 value = `${value}abc`
4 console.log(value)
5}
6append() // abc
7append() // abcabc
8append() // abcabcabc
标签函数
1const a = 6
2const b = 9
3function simpleTag(strings, ...expressions) {
4 console.log(strings)
5 for (const expression of expressions)
6 console.log(expression)
7
8 return 'foobar'
9}
10const taggedResult = simpleTag`${a} + ${b} = ${a + b}`
11// ["", " + ", " = ", ""]
12// 6
13// 9
14// 15
15console.log(taggedResult) // "foobar"
标签函数的表达式参数的个数始终是 n，传给标签函数的第一个参数所包含的字符串个数则始终是 n+1。返回正常的字符串结果：
1const a = 6
2const b = 9
3function zipTag(strings, ...expressions) {
4 return strings[0] + expressions.map((e, i) => `${e}${strings[i + 1]}`).join('')
5}
6const untaggedResult = `${a} + ${b} = ${a + b}`
7const taggedResult = zipTag`${a} + ${b} = ${a + b}`
8console.log(untaggedResult) // "6 + 9 = 15"
9console.log(taggedResult) // "6 + 9 = 15"
字符串原始值
1console.log(`\u00A9`) // © 是版权符号
2console.log(String.raw`\u00A9`) // \u00A9
3
4console.log(`first line\nsecond line`) // 换行符示例
5// first line
6// second line
7console.log(String.raw`first line\nsecond line`) // "firstline\nsecond line"
8
9// 实际的换行符不行
10console.log(String.raw`first line
11second line`)
12// first line
13// second line
通过标签函数的第一个参数取得原始值：
1function printRaw(strings) {
2 console.log('字面量：')
3 for (const string of strings)
4 console.log(string)
5
6 console.log('原始值：')
7 for (const rawString of strings.raw)
8 console.log(rawString)
9}
10printRaw`\u00A9${'and'}\n`
11// 字面量：
12// ©
13// （换行符）
14// 原始值：
15// \u00A9
16// \n
识别查找
1// 传入正则会抛出错误
2
3includes() // 返回布尔值，判断是否找到参数字符串。
4startsWith() // 返回布尔值，判断参数字符串是否在原字符串的头部。
5endsWith() // 返回布尔值，判断参数字符串是否在原字符串的尾部。
6
7const string = 'apple,banana,orange'
8string.includes('banana') // true
9string.startsWith('apple') // true
10string.endsWith('apple') // false
11string.startsWith('banana', 6) // true
repeat()
repeat()：返回新字符串，将字符串重复指定次数返回。
1'Hello,'.repeat(2) // "Hello,Hello,"
2'Hello,'.repeat(3.2) // "Hello,Hello,Hello," 向下取整
0 至 -1 之间的小数，取整得到 -0 ，等同于 repeat 零次
NaN，等同于 repeat 零次
负数或者 Infinity ，会报错:
1'Hello,'.repeat(-0.5) // ""
2'Hello,'.repeat(Number.NaN) // ""
传入字符串会隐式转换数字
1'Hello,'.repeat('hh') // ""
2'Hello,'.repeat('2') // "Hello,Hello,"
字符串补全
padStart：返回新的字符串，从头部（左侧）补全。
padEnd：返回新的字符串，从尾部（右侧）补全。
1'123'.padStart(10, '0') // "0000000123" 常用于补全位数
2'h'.padStart(5, 'o') // "ooooh"
3'h'.padEnd(5, 'o') // "hoooo"
4'h'.padStart(5) // " h" 没有第二个参数默认空格
5'hello'.padStart(5, 'A') // "hello" 小于或等于返回原字符
6'hello'.padEnd(10, ',world!') // "hello,worl" 截去超出位数
去除空格
trimStart()：消除字符串头部的空格 trimEnd()：消除尾部的空格
1// 返回的都是新字符串，不会修改原始字符串
2const s = ' abc '
3s.trim() // "abc"
4s.trimStart() // "abc "
5s.trimEnd() // " abc"
:::tip 提示浏览器还部署了额外的两个方法，trimLeft() 是 trimStart() 的别名，trimRight() 是 trimEnd() 的别名。 :::
替换
matchAll()：方法返回一个正则表达式在当前字符串的所有匹配
1'aabbcc'.replaceAll('b', '_') // 'aa__cc'
2// 返回一个新字符串，不会改变原字符串。 一次性替换所有匹配。
