ES6的字符串中常用的知识总结

1. 字符串遍历

ES6为字符串添加了遍历器接口,这样字符串就可以使用for…of循环遍历了而且还可以识别大于0xFFFF的码点,传统的for循环无法识别.

for (let codePoint of 'foo') {
    
    
  console.log(codePoint)
}
//输出为:"f","o","o"

2.模板字符串${}

个人认为字符串中最好用的连接字符的方式.让我们不再为字符和变量之间的拼接而烦恼
模板字符串(template string)是增强版的字符串,用反引号(`)标识(若字符串中需要表示反引号,则需要在反引号前面使用反斜杠转义)。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量(甚至方法都是可以的)。字符串中的换行和空格也会保留下来,如果不想要可以使用trim方法消除

$('#result').append(`
  There are <b>${
      
      basket.count}</b> items
   in your basket, <em>${
      
      basket.onSale}</em>
  are on sale!
`);

你还可以使用模板字符串做一些更加复杂的事情,这里不过多赘述.

3.字符串新增的方法includes(),startsWith(),endsWith()

以前JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
includes():返回布尔值,表示是否找到了参数字符串。
startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
这三个方法都支持第二个参数,表示开始搜索的位置。

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

4.新增的方法repeat()

repeat方法返回一个新字符串,表示将原字符串重复n次。但是若参数是一个小数,则会向下取整,若参数是负数或者Infinity,则会报错,介于0-1之间的小数等同于零

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

5.新增的方法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'

上面代码中,padStart()和padEnd()一共接受两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串。(若第二个参数省略,则以空格补全长度)
如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串。
这两个方法还有一个比较用途就是提示字符串格式,看下面的例子

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

6.新增的方法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()的别名。

7.新增的方法replaceAll(searchValue, replacement)

以前的replace()方法只能替换第一个满足匹配条件的,如果想要替换所有,就不得不使用正则表达式来达到想要的目的,而正则表达式毕竟不是那么方便和直观,当然,这个新增的方法依旧可以使用正则表达式作为第一个参数(前提是必须是带有g全局修饰符的正则表达式,否则会报错)**ES2021 引入了replaceAll()方法,可以一次性替换所有匹配。**它的用法与replace()相同,返回一个新字符串,不会改变原字符串。

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

replaceAll()的第二个参数是一个表示替换的文本,也支持一些特殊的字符
$&:匹配的子字符串。
$` :匹配结果前面的文本。
$’:匹配结果后面的文本。
$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'

replaceAll()的第二个参数replacement除了为字符串,也可以是一个函数,该函数的返回值将替换掉第一个参数searchValue匹配的文本。

猜你喜欢

转载自blog.csdn.net/weixin_42965828/article/details/114677256