4. 字符串扩展及新增方法

字符串扩展

字符串遍历

ES6 为字符串添加了遍历器接口（详见《Iterator》一章），使得字符串可以被for...of循环遍历。

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

模板字符串

// 普通字符串
`In JavaScript '\n' is a line-feed.`  // \n可以换行显示

// 多行字符串
`In JavaScript this is
not legal.`

console.log(`string text line 1
string text line 2`);
// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

标签模板

console.log`123`
// 等同于
console.log(['123'])

let a = 5;let b = 10;
tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);

原始字符串String.raw标签函数

使用模板字面量还可以直接获取原始字面量内容，而不是被转换后的字符。也可以使用 String.raw 防止转义。以版权符号 ©️ 为例，看下效果

console.log('\u00A9') // ©
console.log(`\u00A9`) // ©
console.log(String.raw`\u00A9`) // \u00A9

字符串的新增方法

实例方法: includes() 、startWith() 、endWith()

• includes('str', startIndex) 返回布尔值，表示是否找到了该字符串
• startWith('str', startIndex) 返回布尔值，表示参数字符串是否在原字符串的头部
• endWidth('str', length) 返回布尔值，表示参数字符串是否在原字符串的尾部

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true  搜索字符串长度为5
s.includes('Hello', 6) // false

实例方法: repeat(), padStart(), padEnd()

// repeat(str, n)，返回一个新的字符串，将字符串str重复n次
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

// padStart(targetLength , padString), padEnd(targetLength , padString)  
// 参数
// - targetLength
// 当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
// - padString 可选
// 填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
'xxx'.padStart(2, 'ab') // 'xxx'
'abc'.padStart(10, '0123456789') // '0123456abc'
'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

// 用途 
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"