[ES6]2 字符串的扩展

一、JS中 有 indexOf

用来确定一个字符串是否包含在另一个字符串中

• 首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

console.log(beasts.indexOf('giraffe'));
// expected output: -1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

var array = [2, 5, 9];
array.indexOf(2, -1); // -1 表示从最后一个开始
array.indexOf(2, -3); // 0

e.g. 找出指定元素出现的所有位置

var indices = [];
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = array.indexOf(element);
while (idx != -1) {
  indices.push(idx);
  idx = array.indexOf(element, idx + 1);
}
console.log(indices);
// [0, 2, 4]

二、

includes()：返回布尔值，表示是否找到了参数字符串。

startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。

endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

这三个方法都支持第二个参数，表示开始搜索的位置。

let s = 'Hello world!';

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


let s = 'Hello world!';

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

使用第二个参数n时，endsWith的行为与其他两个方法有所不同。
它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

三、repeat()

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

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

'na'.repeat(2.9) // "nana"  //如果是小数，会被取整。

四、字符串补全长度的功能。padStart()用于头部补全，padEnd()用于尾部补全。

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


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

4.1用途一：padStart()的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。

'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"

4.2用途二：提示字符串格式

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

五、trimStart()，trimEnd()

(返回新字符串，不会该改变元字符串)

const s = '  abc  ';

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

六、replaceAll() 替换所有的匹配

(返回新字符串，不会该改变元字符串)

• replace()只能替换第一个匹配。 需要正则表达式 配合

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

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

• replaceAll()

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

• 特殊字符串
  

// $& 表示匹配的字符串，即`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'

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

• 函数
  这个替换函数可以接受多个参数:
  第一个参数是捕捉到的匹配内容
  第二个参数捕捉到是组匹配（有多少个组匹配，就有多少个对应的参数）。
  此外，最后还可以添加两个参数，倒数第二个参数是捕捉到的内容在整个字符串中的位置，最后一个参数是原字符串。

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()

接受一个整数作为参数，返回参数指定位置的字符，支持负索引（即倒数的位置）
超出字符串范围 返回undefined

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