平凡前端之路_18.字符串的扩展

系列文章

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

字符串的拓展

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

功能	描述
模板字面量	使用反单引号（`）来创建带有变量占位符的字符串，可以更方便地进行字符串拼接。
多行字符串	允许在代码中使用多行字符串而不需要使用转义字符或字符串连接符。
字符串插值	在模板字面量中使用${}语法将变量的值嵌入到字符串中。
字符串拓展方法	字符串添加了许多新的方法，例如startsWith()、endsWith()、includes()等，使得字符串操作更加方便和易读。
Unicode支持	允许在字符串中使用Unicode字符，包括表情符号和其他特殊字符。

---

模板字面量

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

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）

方法	描述
includes	返回布尔值，判断是否找到参数字符串。
startsWith	返回布尔值，判断参数字符串是否在原字符串的头部。
endsWith	返回布尔值，判断参数字符串是否在原字符串的尾部。

includes 方法接受两个参数
第一个参数为需要搜索的字符串。默认值为undefined。
第二个参数为可选的搜索起始位置索引。默认值为0。

startsWith方法接受两个参数
第一个参数为需要搜索的字符串。默认值为undefined。
第二个参数为可选的搜索起始位置索引。默认值为0。

endsWith方法接受两个参数
第一个参数为需要搜索的字符串。默认值为undefined。
第二个参数为可选的搜索终止位置索引。默认值为字符串长度。

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）

方法	描述
trimStart	返回新的字符串，消除字符串头部(左侧)的空格字符(即空格、制表符、换行符)。
trimEnd	返回新的字符串，消除字符串尾部(右侧)的空格字符(即空格、制表符、换行符)。

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

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

方法	描述
padStart	返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串。
padEnd	返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串。
repeat	返回新的字符串，表示将参数字符串重复指定次数。

padStart、padEnd方法接受两个参数
第一个参数是指定生成的字符串的最小长度。默认值为字符串长度。
第二个参数是用来补全的字符串。默认值空格字符。

padStart、padEnd方法特别注意
若第一个参数不是数字，则会先转化为数字
若原字符串大于或者等于指定的长度，则返回原字符串
若原字符串加上补全字符串长度*n(n>0)大于指定长度，则尽可能多的重复添加补全字符串，并截去相应超出位数的补全字符串以满足指定长度
若第一个参数是Infinity ，则报错
新的字符串长度不会大于最长的字符串
若第二个参数是正则表达式 ，则报错 不会报错
若第二个参数不是字符串，则会先转化为字符串

repeat方法特别注意
若参数不是数字，则会先转化为数字
若参数是小数，则会先向下 取整
若参数是负数，则报错
若参数是Infinity ，则报错
新的字符串长度不会大于最长的字符串

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

替换字符串（replaceAll）

replaceAll 方法接受两个参数
第一个参数是要替换的子字符串或正则表达式
第二个参数是用于替换的字符串或函数。

replaceAll 方法特别注意
若第一个参数不是字符串或正则表达式，则会先转化为字符串
第一个参数是正则表达式时，必须设置全局（“g”）标志，否则报错
若第二个参数不是字符串或函数，则会先转化为字符串

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支持使字符串处理更加灵活。

知识题

问题	答案
“啊对对对”.repeat(-0.5)，返回什么?	“”。repeat方法若参数是小数，则会先取整。repeat(0)，即不重复。
‘null’.includes(null)，返回什么?	true。includes 方法第一个参数若不是字符串先转化为字符串
‘undefined’.includes()，返回什么?	true。includes 方法第一个参数默认值是undefined，且先转化为字符串
Math取整有什么方法	floor向下取整。ceil向上取整。round四舍五入取整。trunc取整
“啊对对对”.trimEnd(‘对’)，会返回“啊”	错误。trimEnd不接受参数，不能消除指定字符串。[lodash 拓展了该功能]