【读书笔记】ES6 第4章 字符串的扩展

第四章 字符串的扩展

参考资料：《ES6标准入门第3版》

1.  ES6 加强了对 Unicode 字符的表示

let s = "\u{4f60}"
console.log(s) // 打印 "你" 这个字符

ES6 不仅加强了对 Unicode 字符的表示，并且还为其添加了许多字符串的方法来识别 32位的 UTF-16 字符，这里暂时略过，以后有空补充。

2. 字符串的遍历器接口

ES6 为字符串添加了遍历器接口，使得字符串可以由 for...of 循环遍历。

for(let code of 'abcdef'){
	console.log(code)
}
// a
// b
// c
// d
// e
// f

3. includes()、startsWith()、endsWith() 方法

这三个方法都支持两个参数，第一个参数表示需要匹配的字符串，第二个参数表示从字符串中开始搜索的位置，第二个参数可省略，若省略则表示从字符串的 0 位置开始搜索。

3.1 includes()  检查字符串中是否含有子串

console.log('hello world'.includes('world')) // true
console.log('hello world'.includes('world1')) // false
console.log('hello world'.includes('world1',6))  // false

3.2 startsWith() 判断字符串是否以...开头 

let url = 'admin/index.php'
console.log(url.startsWith('admin')) //true 

3.2 endsWith() 判断字符串是否以...结束

let file = 'game.exe'
console.log(file.endsWith('.exe')) //true 

注意 startsWith，endsWith 方法名称中都有带 s

4. repeat() 方法

repeat方法返回一个新字符串，表示将原字符串重复n次。

console.log('x'.repeat(3)) // "xxx"
console.log('hello'.repeat(2))// "hellohello"
console.log('na'.repeat(0))// ""

5. padStart()、padEnd() 方法

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

最方便的就是用来给指定位数的数字补零了。

let s = '1'
s = s.padStart(5,'0')
console.log(s) // 00001


let s = 'abc'
s = s.padEnd(5,'0')
console.log(s) // abc00



let s = '09-12'
s = s.padStart(10,'YYYY-MM-DD')
console.log(s) // YYYY-09-12

省略第二个参数默认会使用空格来补全。

'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

6. 模板字符串

ES6 使用模版字符串来解决多个字符串和变量拼接的问题。

模版字符串是增强版的字符串，用反引号 (`) 标识。它可以作为普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 定义多行字符串
let s = `Hello 
World !`
console.log(s) 
// Hello
// World !

 在模版字符串中，所有的换行，缩进，空格都会被保留在字符串中。

let s = `	<-前面是缩进，我是空格：   ，
换行了。`	
console.log(s) 
// 	<-前面是缩进，我是空格：   ，
//换行了。

可以使用 ${ 变量名 } 在模版字符串中嵌入变量, 此外${ }中可以放入任何的 JavaScript 的表达式。

let name = 'agiao'
let s = `你好, 小 ${ name }`
console.log(s)  // 你好, 小 agiao

模板字符串可以嵌套。

const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;