【04】ES6：字符串的扩展
一、模板字符串
模板字符串是可以插入表达式的字符串字面量。模板字符串和传统字符串比较，存在以下特点：
1、使用反单引号
传统字符串字面量使用单引号 ‘’ 或者双引号 “”，模板字符串使用反单引号（backquote） ``
const str1 = 'hello world'
const str2 = `hello world`
console.log(str1, str2, str1 === str2)
// hello world, hello world, true
2、插入表达式
模板字符串可以插入表达式，通过 ${expression} 形式插入表达式
expression 可以是任意常量、变量、函数调用。在 ${expression} 前后，也可以有任意的其他合法的字符，例如 `abc${expression}dfg` 。最终，${expression} 会转化为字符串和前后的字符串拼接，如果有的话。
const person = {name: '小明',age: 14,sex: '男'
}// 传统字符串写法
const info = '姓名是：' + person.name +', 年龄是：' + person.age +', 性别：' + person.sex// 模板字符串写法
// const info = `姓名是：${person.name}, 年龄是：${person.age}, 性别：${person.sex}` console.log(info)
// 姓名是：小明, 年龄是：14, 性别：男
3、模板字符串可以有多行文本
模板字符串中，所有的空格、换行或缩进都会被保存在输出中
// 一般字符串
const info = '第一行\n第二行'// 模板字符串
const info = `第一行
第二行` // 注意不能有缩进console.log(info)
/*
第一行
第二行
*/
二、字符串的新增方法
字符串的所有方法都不会改变原字符串
1、includes()、startsWith()、endsWith()
传统上，JavaScript 只有 indexOf 和 lastIndexOf 方法，可以用来确定一个字符串是否包含在另一个字符串中。
- str.indexOf(str, [start]) ：字符串索引，返回检索字符在字符串中首次出现位置，没有找的返回-1。从字符串开头开始，start表示开始搜索的位置，默认为0第一项。
- str.lastIndexOf(str, [start])：字符串索引，返回检索字符在字符串中首次出现位置，没有找的返回-1。从字符串结尾开始，start表示开始搜索的位置，默认从array.length-1开始检索。
ES6 新增了三种方法：
- includes()：返回布尔值，表示是否找到了参数字符串。
- startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
- endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
let s = 'Hello world!'s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true// 这三个方法都支持第二个参数，表示开始搜索的位置。
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
2、repeat()
repeat() 方法返回一个新字符串，表示将原字符串重复 n 次。
'x'.repeat(3) // 'xxx'
'hello'.repeat(2) // 'hellohello'
'na'.repeat(0) // ''
当 repeat 的参数不为正整数 和 0 时的情况：
// 参数是小数，会被取整
'na'.repeat(2.9) // 'nana'// 参数是负数或者 Infinity，会报错
'na'.repeat(Infinity) // RangeError
'na'.repeat(-1) // RangeError// 参数是 0 到-1 之间的小数，则等同于 0。因为会先进行取整运算，取整以后等于 -0，repeat 视同为 0。
'na'.repeat(-0.9) // ''// 参数 NaN 等同于 0
'na'.repeat(NaN) // ''// 参数是字符串，则会先转换成数字
'na'.repeat('na') // ''
'na'.repeat('3') // 'nanana'
3、padStart()、padEnd()
ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全，返回补全后达到指定长度的字符串。
padStart(targetLength, [str])用于头部补全，padEnd(targetLength, [str])用于尾部补全。targetLength 为字符串补全生效的最大长度， str 是用来补全的字符串，默认为空格。
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax''x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba''x'.padStart(4) // ' x'
'x'.padEnd(4) // 'x '// 如果原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串
'xxx'.padStart(2, 'ab') // 'xxx'
'xx'.padEnd(2, 'ab') // 'xx'// 如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串。
'abc'.padStart(10, '0123456789') // '0123456abc'
常见用途：为数值补全指定位数、提示字符串格式、日期格式化
// 生成 10 位的数值字符串
'1'.padStart(10, '0') // '0000000001'
'12'.padStart(10, '0') // '0000000012'
'123456'.padStart(10, '0') // '0000000012''12'.padStart(10, 'YYYY-MM-DD') // 'YYYY-MM-12'
'09-12'.padStart(10, 'YYYY-MM-DD') // 'YYYY-09-12'
/*** 格式化日期* @param {Object} date new Date()* @param {Object} fmt 格式、'YYYY年mm月dd日 HH:MM:SS'*/
export const dataFormat = (date, fmt) => {let retconst opt = {'Y+': date.getFullYear().toString(), // 年'm+': (date.getMonth() + 1).toString(), // 月'd+': date.getDate().toString(), // 日'H+': date.getHours().toString(), // 时'M+': date.getMinutes().toString(), // 分'S+': date.getSeconds().toString() // 秒}for (let k in opt) {ret = new RegExp('(' + k + ')').exec(fmt)if (ret) {fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0')))}}return fmt
}
4、trimStart()、trimEnd()
trimStart() 和 trimEnd() 这两个方法，它们的行为与 trim() 一致，trimStart() 消除字符串头部的空格，trimEnd() 消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。
const s = ' abc 's.trim() // 'abc'
s.trimStart() // 'abc '
s.trimEnd() // ' abc'
除了空格键，这两个方法对字符串头部（或尾部）的 tab 键、换行符等不可见的空白符号也有效。
浏览器还部署了额外的两个方法，trimLeft() 是 trimStart() 的别名，trimRight() 是trimEnd() 的别名。
5、at()
at() 方法接受一个整数作为参数，返回参数指定位置的字符，支持负索引（即倒数的位置）。
const str = 'hello'
str.at(1) // 'e' （等价 str[1]）
str.at(-1) // 'o' （str[-1] 返回 undefined）
str.at(7) // undefined （等价 str[7]）
如果参数位置超出了字符串范围，at() 返回 undefined。