ES6中字符串的新增功能

ES6新增了一些操作字符串的功能，一下就是部分平时用到的功能

String.raw()

es6为原生的String对象提供了一个raw()方法，次方法可以实现返回 '\'的转译，一般用于模版字符串的返回

String.raw`Hi\n${2+3}!`
// 实际返回 "Hi\n5!"，显示的是转义后的结果 "Hi\n5!"

String.raw`Hi\u000A!`;
// 实际返回 "Hi\u000A!"，显示的是转义后的结果 "Hi\u000A!"

如果原字符串的斜杆已经转译，String.raw()会进行再次转译

String.raw`Hi\n`
// 返回 "Hi\\n"

String.raw`Hi\n` === "Hi\\n" // true

String.raw()方法可以作为处理模板字符串的基本方法，它会将所有变量替换，而且对斜杠进行转义，方便下一步作为字符串来使用。

String.raw()本质上是一个正常的函数，只是专用于模板字符串的标签函数。如果写成正常函数的形式，它的第一个参数，应该是一个具有raw属性的对象，且raw属性的值应该是一个数组，对应模板字符串解析后的值。

// `foo${1 + 2}bar`
// 等同于
String.raw({ raw: ['foo', 'bar'] }, 1 + 2) // "foo3bar"

上面代码中，String.raw()方法的第一个参数是一个对象，它的raw属性等同于原始的模板字符串解析后得到的数组。

作为函数，String.raw()的代码实现基本如下。

String.raw = function (strings, ...values) {
  let output = '';
  let index;
  for (index = 0; index < values.length; index++) {
    output += strings.raw[index] + values[index];
  }

  output += strings.raw[index]
  return output;
}

实例方法：includes(), startsWith(), endsWith()

javascript只提供了indexof()方法来判断字符串包含在另一个字符串中，ES6提供了3种方式 inclouds():返回布尔值，表示是否找到了参数字符串； startsWith():返回布尔值，表示参数字符串是否在原字符串的头部； endsWith():返回布尔值，表示参数字符串是否在原字符串的尾部。

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

这三个方法都支持第二个参数，表示开始搜索的位置，有区别的地方在于，endsWith()是针对前n个字符开始比较，其余两个方法是从第n个开始比较。

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

实例方法：repeat()

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

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

参数如果是小数，会取整

'na'.repeat(2.9) // "nana"

参数是负数或者Infinity会报错

'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError

参数是-1-0之间的小数，则等同于0

'na'.repeat(-0.9) // ""

参数NaN等同于0

'na'.repeat(Nan) // ""

参数如果是字符串，会先转化成数字

'na'.repeat('nana') // ""
'na'.repeat('3') // "nanana"

实例方法：padStart().padEnd()

ES2017引入了字符串补全长度的功能，如果字符串不够指定的长度，会在头部或者尾部补全。padStart()用于头部补全，padEnd用于尾部补全。两个方法都有两个参数，第一个是补全的最大长度，第二个用来补全的字符串

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

当用于补全和原字符串的最大长度大于最大补全长度时，会截取补全字符串

'abc'.padStart(10, '0123456789')
// '0123456abc'

当省略低第二个参数时，默认使用空格补全

'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

实例方法：trimStart()，trimEnd()

ES2019对字符串势力新增了trimStart()和trimEnd()这两个方法。它们的行为与trim()一致，trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。

const s = '  abc  ';

s.trim() // "abc"
s.trimStart() // "abc  "
s.trimEnd() // "  abc"

trimStart()只消除头部的空格，保留尾部的空格。trimEnd()也是类似行为。

除了空格键，这两个方法对字符串头部（或尾部）的 tab 键、换行符等不可见的空白符号也有效。

浏览器还部署了额外的两个方法，trimLeft()是trimStart()的别名，trimRight()是trimEnd()的别名。

实例方法：replaceAll()

字符串的实例方法replace()只能替换第一个匹配。

'aabbcc'.replace('b', '_')
// 'aa_bcc'

如果要替换所有的匹配，不得不使用正则表达式的g修饰符。

aabbcc.replace('/b/g','_')
// 'aa__cc'

正则毕竟不方便，所以ES2021引入replaceAll()方法，可以一次性替换所有匹配

'aabbcc'.replaceAll('b', '_')
// 'aa__cc'

两个方法一样，都会返回一个新的字符串，不会改变原字符串

实例方法：at()

at()方法接受一个整数作为参数，返回参数指定位置的字符，支持负索引（即倒数的位置）。

const str = 'hello';
str.at(1) // "e"
str.at(-1) // "o"

如果参数位置超出了字符串范围，at()返回undefined。