开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第21天，点击查看活动详情
前言
对于String的方法使用，在日常项目开发中比较常见，比如模板字符串、实例方法等等，看ECMAScript 6 入门 一直没有时间梳理，今天刚好周末，就梳理并整理一下，记录如下
字符串扩展
模板字符串
在项目中比较常用，模板字符串（template string）是增强版的字符串，用反引号（`）标识。主要用途：
- 当作普通字符串使用
- 定义多行字符串
- 在字符串中嵌入变量
// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
console.log(`string text line 1
string text line 2`);
// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
字符串方法
es6新增方法--思维导图
String.fromCodePoint()
匹配Unicode码对应的字符，主要是解决String.fromCharCode()不能识别大于oxFFFF的码点，String.fromCodePoint可以识别大于oxFFFF的码点，在作用上，codePointAt() 与其相反
以ox20BB7为例，如下：
String.fromCharCode(0x20BB7); // 'ஷ'
// 去掉了最前面的2
String.fromCharCode(0x0BB7); // 'ஷ'
// 去掉了后面的7
String.fromCharCode(0x20BB); // '₻'
String.fromCodePoint(0x20BB7); // '𠮷'
控制台输出结果：
存在多个参数
如果String.fromCodePoint方法有多个参数，则它们会被拼接成一个字符串返回。以String.fromCodePoint(0x78, 0x1f680, 0x79) 为例：
String.fromCodePoint(0x78, 0x1f680, 0x79); // 'x🚀y'
String.fromCodePoint(0x78); // 'x'
String.fromCodePoint(0x1f680); // '🚀'
String.fromCodePoint(0x79); // 'y'
控制台输出结果：
String.raw()
ES6 还为原生的
String对象，提供了一个raw()方法。该方法返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，往往用于模板字符串的处理方法。
感觉这个方法，在项目中用到的不多，但是用到的时候比较难理解吧，举例子会比较容易理解：
String.raw`Hi\n${2+3}!`
// 实际返回 "Hi\\n5!"，显示的是转义后的结果 "Hi\n5!"
String.raw`Hi\u000A!`;
// 实际返回 "Hi\\u000A!"，显示的是转义后的结果 "Hi\u000A!"
includes(str),startsWith(str),endsWith(str)
用来确定一个字符串是否包含另外一个字符串，js中已经存在indexOf()方法，es6中新增了如下3个办法：
includes(str)：返回bool，表示是否找到了参数字符串。startsWith(str)：返回bool，表示参数字符串是否在原字符串的头部。endsWith(str)：返回bool，表示参数字符串是否在原字符串的尾部。
let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
支持第2个参数，如下：
let s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
注意：startsWidth(str, n)的n表示从前n个字符串中查找
repeat(num)
将原字符串重复n次
'hello'.repeat(2) // "hellohello"
注意事项
- 一般为大于1的整数
n===0||n===NaN||-1<n<0：会返回空字符串n===Infinity||n≤-1：会报错n是字符串，会先转换成数字，再返回
控制台输出如下：
padStart(len,str)，padEnd(len,str)
字符串长度补全功能，返回新字符串
padStart：头部补全padEnd：尾部补全len：字符串补全生效的最大长度str（可选）：用来补全的字符串，省略的话会采用空字符串补全
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(4) // 'x '
注意事项
如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串
'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'
控制台输出：
如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串
// str刚好是10位，所以去掉了后面的789
'abc'.padStart(10, '0123456789') // '0123456abc'
trimStart()，trimEnd()
和trim()方法相似，去除前后空格，返回新字符串
trimStart()：去除头部的空格trimEnd()：去除尾部的空格
let s=' hello '
s.trim() // 'hello'
s.trimStart() // 'hello '
s.trimEnd() // ' hello'
控制台输出：
**注意：**浏览器还部署了额外的两个方法，trimLeft()是trimStart()的别名，trimRight() 是trimEnd()的别名
replaceAll(regexp|substr, newSubstr|function)
字符匹配替换，跟es5中replace()+g方法的使用效果一样，一次性替换所有匹配
replaceAll()的第二个参数newSubstr是一个字符串，表示替换的文本，其中可以使用一些特殊字符串。
$&：匹配的字符串- $` ：匹配结果前面的文本
$'：匹配结果后面的文本$n：匹配成功的第n组内容，n是从1开始的自然数。这个参数生效的前提是，第一个参数必须是正则表达式$$：指代美元符号$
// $& 表示匹配的字符串，即`b`本身
// 所以返回结果与原字符串一致
'abbc'.replaceAll('b', '$&')
// 'abbc'
// $` 表示匹配结果之前的字符串
// 对于第一个`b`，$` 指代`a`
// 对于第二个`b`，$` 指代`ab`
'abbc'.replaceAll('b', '$`')
// 'aaabc'
// $' 表示匹配结果之后的字符串
// 对于第一个`b`，$' 指代`bc`
// 对于第二个`b`，$' 指代`c`
'abbc'.replaceAll('b', `$'`)
// 'abccc'
// $1 表示正则表达式的第一个组匹配，指代`ab`
// $2 表示正则表达式的第二个组匹配，指代`bc`
'abbc'.replaceAll(/(ab)(bc)/g, '$2$1')
// 'bcab'
// $$ 指代 $
'abc'.replaceAll('b', '$$')
// 'a$c'
第2个参数还可以是个function，如下：
'aabbcc'.replaceAll('b', () => '_') // 'aa__cc'
对于复杂使用，引用ES6入门（阮一峰）的一段话：
这个替换函数可以接受多个参数。第一个参数是捕捉到的匹配内容，第二个参数捕捉到是组匹配（有多少个组匹配，就有多少个对应的参数）。此外，最后还可以添加两个参数，倒数第二个参数是捕捉到的内容在整个字符串中的位置，最后一个参数是原字符串。
const str = '123abc456'; const regex = /(\d+)([a-z]+)(\d+)/g; function replacer(match, p1, p2, p3, offset, string) { return [p1, p2, p3].join(' - '); } str.replaceAll(regex, replacer) // 123 - abc - 456
at(num)
at()方法接受一个整数作为参数，返回参数指定位置的字符，支持负数（即倒数的位置）
const str = 'hello';
str.at(1) // "e"
str.at(-1) // "o"
控制台输出：
注意： 如果参数大于字符串长度，at()返回undefined
其他
es6还提供了matchAll()、codePointAt()、normalize()三种方法，但是我所参与的项目中使用的不多，所以就不详细说明了
