系列文章

平凡前端之路_01.HTML与 HTML5
平凡前端之路_05.CSS与CSS3
平凡前端之路_14.ES与ES6
平凡前端之路_15.let 和 const声明
平凡前端之路_16.变量的解构赋值
平凡前端之路_17.展开操作符(Spread)/剩余参数(Rest)

字符串的拓展

ES6版本及之后引入了许多新的字符串相关功能：

模板字面量

使用反单引号（`）来创建带有变量占位符的字符串，可以更方便地进行字符串拼接。

let str = '蒙的全队'
let str1 = `考的全会,${str }`
str1 //=> '考的全会,蒙的全队'

多行字符串

通过模板字面量可以声明多行字符串而不需要使用转义字符或字符串连接符，注意包含回车在内。

let str2 = `啊对对队,
你说对就队`
str2 //=> '啊对对对,\\n你说对就对'

字符串插值

在模板字面量中使用${}语法将 在字符串中嵌入变量、表达式甚至函数调用。

let st1 = '有两点'
let st2 = '这'
let fn1 = () => '那'
let str3 = `${st1}不队`
let str4 = `${true? st2: st1}不队`
let str5 = `${fn1()}不队`
str3 //=> '有两点不队'
str4 //=> '这不队'
str5 //=> '那不队'

字符串扩展方法

ES6为字符串添加了许多新的方法，例如startsWith()、endsWith()、includes()等，使得字符串操作更加方便和易读。

查找字符串 （includes、startsWith、endsWith）

let str = '有两点不队,这不队,那不队'
let has = str.includes('这不队')
let start = str.startsWith('有两点不队') 
let ends = str.endsWith('那不队') 
has //=> true
start //=> true
ends //=> true

消除空格字符（trimStart、trimEnd）

let str = '  什么档次和我一队\\n'
let str6 = str.trimStart()
let str7 = str.trimEnd()
str6 //=>'什么档次和我一队\\n'
str7 //=>'  什么档次和我一队'

追加字符串（padStart、padEnd、repeat）

let str = '对'
let str8 = str.padStart(5, '对是不')
let str9 = str.padEnd(4, '是不对')
let str0 = str.repeat(3)
str8 //=> '对是不对对'
str9 //=> '对是不对'
str0 //=> '对对对'

替换字符串（replaceAll）

let str = "有两点不队,这不队,那不队";// 将字符串中的所有 "队" 替换为 "对"
let stra = str.replaceAll("队", "对");
stra //=> '有两点不对,这不对,那不对'// 使用正则表达式将字符串中的所有 "队" 替换为 "对"
let strb = str.replaceAll(/队/g, "对");
strb //=> '有两点不对,这不对,那不对'// 传递一个函数来生成字符串"对"将所有 "队" 替换
let strc = str.replaceAll("队", match => '对');
strc //=> '有两点不对,这不对,那不对'

Unicode支持

ES6允许在字符串中使用Unicode字符，包括表情符号和其他特殊字符。

可以采用 \\uxxxx 形式表示一个字符，其中 xxxx 表示字符的码点

ES6支持将码点放入大括号，就能正确解读超出码点在UTF-16 编码(\\u0000~\\uFFFF)范围的字符

let u =  "\\uD842\\uDFB7"   
let n = "\\u20BB7"
u //=> '𠮷'
n //=> '₻7'
let i = "\\u{20BB7}"
i //=> '𠮷'

大括号表示法与四字节的 UTF-16 编码(\\u0000~\\uFFFF)是等价

let a = '\\z' === 'z'  
let b = '\\172' === 'z' 
let c = '\\x7A' === 'z' 
let d = '\\u007A' === 'z' 
let e = '\\u{7A}' === 'z' 
a //=> true
b //=> true
c //=> true
d //=> true
e //=> true

接入了遍历器接口

ES6 为字符串接入了遍历器(Iterator)接口

let str = '这不队'
let s = [...str ]
s //=> ['这','不','队']for (let i of str ) {console.log(i)
}
// '这'
// '不'
// '队' 

总结

ES6版本及之后的字符串相关功能使得字符串处理更加方便、易读和功能强大。

模板字面量、多行字符串和字符串插值可简化代码，并提高代码的可读性。

字符串拓展方法可以更轻松地执行常见的字符串操作，而Unicode支持使字符串处理更加灵活。

知识题