ES6(2015)String

Posted 2021-09-23 优小U

文章目录

• 1. Unicode表示法
• 2. 遍历器接口
• 3. 模板字符串
• 4. 扩展方法

1. Unicode表示法

ES6 加强了对 Unicode 的支持，允许采用\\uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点。

"\\u0061" // "a"

但是，这种表示法只限于码点在\\u0000~\\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表示。

"\\uD842\\uDFB7"
// "𠮷"

"\\u20BB7"
// " 7"

如果直接在\\u后面跟上超过0xFFFF的数值（比如\\u20BB7），javascript 会理解成\\u20BB+7。由于\\u20BB是一个不可打印字符，所以只会显示一个空格，后面跟着一个7。

有了这种表示法之后，JavaScript 共有 6 种方法可以表示一个字符。

'\\z' === 'z' // true
'\\172' === 'z' // true
'\\x7A' === 'z' // true
'\\u007A' === 'z' // true
'\\u{7A}' === 'z' // true

2. 遍历器接口

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

for (let item of 'oh,es6 is 666!') {
    console.log(item)
}

3. 模板字符串

先看看ES5中处理字符串复杂的方式：

// 字符串很长要换行,处理不好就会导致程序语法错误

// 字符串中有变量或者表达式,拼接字符串很麻烦，稍不留意就错了
var name = "xiaoming"
var age = 18
var res = 'Hello, my name is' + name + ' I\\'m' + age
console.log(res)

ES6 中引入字符串字面量来解决字符串拼接问题：

// 换行问题
`string text line 1
 string text line 2`

// 字符串中包含变量或表达式，拼接
`Hello, my name is ${name} I'm ${age}`

ES6 中还引入了标签模板来解决字符串复杂逻辑：

// 定义标签函数
function tag(literals, ...substitutions) {
  // 返回一个字符串
}
var a = 5;
var b = 10;

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

4. 扩展方法

• String.prototype.fromCodePoint()
  从 Unicode 码点返回对应字符，并且可以识别大于0xFFFF的字符

// ES5
console.log(String.fromCharCode(0x20BB7))

// ES6
console.log(String.fromCodePoint(0x20BB7))

• String.prototype.includes()

// ES5 使用indexOf方法判断是否存在，不存在返回-1，存在返回对应下标
const str = 'hello'
console.log(str.indexOf('lo'))

// ES6提供了includes方法来判断，返回boolean类型的值
const str = 'hello'
console.log(str.includes('lo'))

• String.prototype.startsWith()
  判断参数字符串是否在原字符串的头部, 返回boolean类型的值。

const str = 'hello'
console.log(str.startsWith('he'))

• String.prototype.endsWith()
  判断参数字符串是否在原字符串的尾部, 返回boolean类型的值。

const str = 'hello'
console.log(str.endsWith('lo'))

• String.prototype.repeat()
  repeat方法返回一个新字符串，表示将原字符串重复n次。

const str = 'hello'
const newStr = str.repeat(3)
console.log(newStr) // hellohellohello