JavaScript ES6 String 字符串新增方法

模板字面量

console.log(`Hello, ${`World`}!`); // Hello, World!

所有插入的值都会使用 toString()强制转型为字符串：

let foo = { toString: () => 'World' };
console.log(`Hello, ${foo}!`); // Hello, World!

也可以插入自己之前的值：

let value = '';
function append() {
  value = `${value}abc`;
  console.log(value);
}
append(); // abc
append(); // abcabc
append(); // abcabcabc

标签函数

let a = 6;
let b = 9;
function simpleTag(strings, ...expressions) {
  console.log(strings);
  for (const expression of expressions) {
    console.log(expression);
  }
  return 'foobar';
}
let taggedResult = simpleTag`${a} + ${b} = ${a + b}`;
// ["", " + ", " = ", ""]
// 6
// 9
// 15
console.log(taggedResult); // "foobar"

标签函数的表达式参数的个数始终是 n，传给标签函数的第一个参数所包含的字符串个数则始终是 n+1。返回正常的字符串结果：

let a = 6;
let b = 9;
function zipTag(strings, ...expressions) {
  return strings[0] + expressions.map((e, i) => `${e}${strings[i + 1]}`).join('');
}
let untaggedResult = `${a} + ${b} = ${a + b}`;
let taggedResult = zipTag`${a} + ${b} = ${a + b}`;
console.log(untaggedResult); // "6 + 9 = 15"
console.log(taggedResult); // "6 + 9 = 15"

字符串原始值

console.log(`\u00A9`); // © 是版权符号
console.log(String.raw`\u00A9`); // \u00A9

console.log(`first line\nsecond line`); // 换行符示例
// first line
// second line
console.log(String.raw`first line\nsecond line`); // "firstline\nsecond line"

// 实际的换行符不行
console.log(String.raw`first line
second line`);
// first line
// second line

通过标签函数的第一个参数取得原始值：

function printRaw(strings) {
  console.log('字面量：');
  for (const string of strings) {
    console.log(string);
  }
  console.log('原始值：');
  for (const rawString of strings.raw) {
    console.log(rawString);
  }
}
printRaw`\u00A9${'and'}\n`;
// 字面量：
// ©
//（换行符）
// 原始值：
// \u00A9
// \n

识别查找

// 传入正则会抛出错误

includes(); // 返回布尔值，判断是否找到参数字符串。
startsWith(); // 返回布尔值，判断参数字符串是否在原字符串的头部。
endsWith(); // 返回布尔值，判断参数字符串是否在原字符串的尾部。

let string = 'apple,banana,orange';
string.includes('banana'); // true
string.startsWith('apple'); // true
string.endsWith('apple'); // false
string.startsWith('banana', 6); // true

repeat()

repeat()：返回新字符串，将字符串重复指定次数返回。

'Hello,'.repeat(2); // "Hello,Hello,"
'Hello,'.repeat(3.2); // "Hello,Hello,Hello," 向下取整

0 至 -1 之间的小数，取整得到 -0 ，等同于 repeat 零次

NaN，等同于 repeat 零次

负数或者 Infinity ，会报错:

'Hello,'.repeat(-0.5); // ""
'Hello,'.repeat(NaN); // ""

传入字符串会隐式转换数字

'Hello,'.repeat('hh'); // ""
'Hello,'.repeat('2'); // "Hello,Hello,"

字符串补全

padStart：返回新的字符串，从头部（左侧）补全。

padEnd：返回新的字符串，从尾部（右侧）补全。

'123'.padStart(10, '0'); // "0000000123" 常用于补全位数
'h'.padStart(5, 'o'); // "ooooh"
'h'.padEnd(5, 'o'); // "hoooo"
'h'.padStart(5); // "  h" 没有第二个参数默认空格
'hello'.padStart(5, 'A'); // "hello" 小于或等于返回原字符
'hello'.padEnd(10, ',world!'); // "hello,worl" 截去超出位数

去除空格

trimStart()：消除字符串头部的空格 trimEnd()：消除尾部的空格

// 返回的都是新字符串，不会修改原始字符串
const s = ' abc ';
s.trim(); // "abc"
s.trimStart(); // "abc "
s.trimEnd(); // " abc"

提示浏览器还部署了额外的两个方法，trimLeft() 是 trimStart() 的别名，trimRight() 是 trimEnd() 的别名。 :::

替换

matchAll()：方法返回一个正则表达式在当前字符串的所有匹配

'aabbcc'.replaceAll('b', '_'); // 'aa__cc'
// 返回一个新字符串，不会改变原字符串。 一次性替换所有匹配。