JavaScript ES(6-11)全版本语法 (十)：字符串的扩展

前提概要

上一篇编写的是ES6中的Map，链接：juejin.cn/post/701542… ， 这次写的是ES6中字符串的扩展，可能不是很全。如有不对的或者不准确的地方，欢迎大家提出😄，我也积极修改。下边开始正文:

Unicode表示法

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

"\u0061"
// "a"

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

"\uD842\uDFB7"
// "𠮷"
"\u20BB7"
// " 7"

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

ES6 对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符。

"\u{20BB7}"
// "𠮷"

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

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

字符串的遍历器接口

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

for (let item of 'beijing') {
  console.log(item) // b e i j i n g
}

模版字符串

在 ES6 之前对字符串的处理是相当的麻烦，看如下场景：

1. 字符串很长要换行

字符串很长包括几种情形一个是开发时输入的文本内容，一个是接口数据返回的文本内容。如果对换行符处理不当，就会带来异常。

2. 字符串中有变量或者表达式

如果字符串不是静态内容，往往是需要加载变量或者表达式，这个也是很常见的需求。之前的做法是字符串拼接：

var a = 8
var b = 10
var c = 'JavaScript'
var str = '我的年龄是' + (a + b) + '，我喜欢' + c
console.log(str) // 我的年龄是18，我喜欢JavaScript

如果字符串有大量的变量和表达式，这个拼接简直是噩梦。

3. 字符串中有逻辑运算

我们通常写代码都是有逻辑运算的，对于字符串也是一样，它包含的内容不是静态的，通常是根据一定的规则在动态变化。

var a = 8
var b = 10
var type = 'cur'
var temp = ''
if (type === 'cur') {
  temp += '你的年龄是：' + a + '岁'
} else {
  temp += '你的年龄是：' + b + '岁'
}
console.log(temp) // '你的年龄是：8岁'

上述的场景在没有模版字符串之前，通常大家的做法是使用上述的字符串拼接+逻辑判断，或者采用字符串模板类库来操作。

ES6中提出了模版字符串(`)，

在这里你可以任意插入变量或者表达式，只要用 ${}包起来就好。

// ES5的写法
let str1 = '今天\n'+'天气\n'+'真好\n'
console.log(str1)
// ES6的写法
let str2 = `今天
天气
真好`
console.log(str2)

上述代码可以看出，我们完全不需要 \n 来参与。

上面第二个场景，我们用模版字符串进行改写,代码如下：

var a = 8
var b = 10
var c = 'JavaScript'
var str = `我的年龄是${a + b}，我喜欢${c}`
console.log(str) // 我的年龄是18，我喜欢JavaScript

上述代码中也避免了大量的拼接，而且按起来更加整洁，易读。

上面第三个场景，我们用模版字符串进行改写，代码如下：

var a = 8
var b = 10
var state = 'cur'
function judge(type){
  if(type === 'cur'){
    return true
  }else{
    return false
  }
}
var temp = judge(state) ? `你的年龄是：${a}岁` : `你的年龄是：${b}岁`
console.log(temp) // 你的年龄是：8岁

带标签的模版字符串

const foo = (a, b, c, d) => {
  console.log(a) // ['这是', '，他的年龄是', '岁', raw: Array(3)]
  console.log(b) // xs
  console.log(c) // 18
  console.log(d) // undefined
}
const name = 'xs'
const age = 18
foo`这是${name}，他的年龄是${age}岁`

上述代码中，我们可以看出foo方法传的的参数是一个用模版字符串拼接的字符串，其中，a表示当前没有变量的部分或者说是不需要被替换的部分，b和c表示的是当前标签模版内传入的两个变量值，因为只传入了两个变量所以d参数打印出来的是undefined。b参数后面可以接收多个b类似的参数。

注意:

a当中会有一个raw属性，这个属性叫做原始字符串

扩展方法

String.prototype.fromCodePoint()

用于从 Unicode 码点返回对应字符，并且可以识别大于0xFFFF的字符。

// String.fromCharCode() // 这个是ES5当中的方法，作用是用于返回unicode码点返回对应的字符 但是不能识别超出ffff之外的码点
console.log(String.fromCharCode(0x20BB7)) // ஷ

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

String.prototype.includes()

indexOf 解锁字符串中是否包含某个子字符串，如果包含就返回当前子字符串的下标，如果不包含就返回-1

const str = 'beijing'
console.log(str.indexOf('ij')) // 2
console.log(str.indexOf('c')) // -1

String.prototype.includes()用于判断字符串中是否包含某一子字符串，如果包含就返回true，如果包不含就返回false

const str1 = 'beijing'
console.log(str.includes('ij')) // true
console.log(str.includes('c')) // false

String.prototype.startsWith()

判断参数字符串是否在原字符串的头部，如果是就返回true，如果不是就返回false

let str = 'beijing'
console.log(str.startsWith('b')) // true
console.log(str.startsWith('a')) // false

String.prototype.endsWith()

判断参数字符串是否在原字符串的尾部，如果是就返回true，如果不是就返回false

let str = 'beijing'
console.log(str.endsWith('g')) // true
console.log(str.endsWith('c')) // false

String.prototype.repeat()

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

const name = 'xs'
const newName = name.repeat(3)
console.log(newName)// xsxsxs