【 ES6 】字符串扩展 & 新增API

一只喵的碎碎念
147 阅读6分钟

前言

本期整理了ES6字符串扩展的相关内容，如果对你有帮助，不要忘了来个点赞哦 👍 ～～。有任何问题还望各位大佬批评指正，谢谢！

ES6是ECMA为JavaScript制定的第6个标准版本，本文知识点参考和摘录《ES6》里的语句。相关详细内容可查看《ES6-ECMAScript6简介》。

字符串的扩展

Unicode表示法

ES6 可以使用\uxxxx形式表示一个字符，其中xxxx表示自负的Unicode码点

 // 这种表示法仅限于码点在\u0000 ~ \uFFFF之间的字符，超出的字符，必须使用两个双字节的形式表示。
 
 '\u0061' // => a

如果\u后面跟着数值大于 0xFFFF ，比如\u20BB7，JavaScript 会理解成\u20BB+7, 由于\u20BB是一个不可打印字符，所以只会显示一个空格，后面跟着一个7。

1658388565362.jpg

// ES6 的改进，只要将码点放入大括号，就能正确解读该字符

"\u{20BB7}" // "𠮷"

"\u{41}\u{42}\u{43}" // "ABC"

let hello = 123;
hell\u{6F} // 123

'\u{1F680}' === '\uD83D\uDE80' // true
'\u{1F680}' === '\uD830\uDE80' // false

遍历器接口

  • ES6 为字符串添加了遍历器接口，使得字符串可以被 for...of遍历循环。
  • 遍历器优点 ：可以识别大于0xFFFF的码点，传统的for循环无法识别这样的码点。
   for (let codePoint of 'foo') {
     console.log(codePoint) // f o o
   }

可直接输入 U+2028 和 U+2029

  • JavaScript 的 5 个特殊符号：
U+005C: 反斜杠（reverse solidus）
U+000D: 回车（carriage return）
U+2028: 行分隔符（line separator）
U+2029: 段分隔符（paragraph separator）
U+000A: 换行符（line feed）

  • ES2019 允许 JavaScript 字符串直接输入 U+2028（行分隔符）和 U+2029（段分隔符）。

  • 注意，模板字符串现在就允许直接输入这两个字符。另外，正则表达式依然不允许直接输入这两个字符，这是没有问题的，因为 JSON 本来就不允许直接包含正则表达式。

模板字符串

  • 模板字符串（template string）是增强版的字符串，用反引号（`）标识.
  • 可以当作普通字符串使用
  • 可以定义多行字符串、空格、缩进都会被保留。
  • 可以嵌入变量，变量中嵌套变量。
  • 可以在模版字符串中调用函数。
  • 多行字符串 trim（）清除首尾所有空格

标签模板

模板字符串紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串；标签使你可以用函数解析模板字符串，标签函数的第一个参数包含一个字符串值的数组，其余的参数与表达式相关，最后函数可以返回处理好的字符串（或者返回完全不同的东西）

alert`hello`
// 等同于
alert(['hello'])

let a = 5;
let b = 10;

tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);

// 模板字符串前面有一个标识名`tag`，它是一个函数。整个表达式的返回值，就是`tag`函数处理模板字符串后的返回值。
  • 过滤HTML字符串的时候，即防止用户输入恶意内容；多语言转换的时候，通过return就可以返回不同的结果。

新增方法API

includes(), startsWith(), endsWith()

ES6之前判断字符串是否包含子串，用indexOf()方法，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

// 这三个只返回布尔值，如果需要知道子串的位置，还需要用indexOf和lastIndexOf
repeat()

repeat方法返回一个新字符串，表示将字符串重复指定次数返回。

'hello'.repeat(2) // "hellohello"

// 1.如果参数是小数，向下取整
'hello'.repeat(3.2) // "hellohellohello"

// 2.如果参数是 0 至 -1 之间的小数，会进行取整运算，0 至 -1 之间的小数取整得到 -0 ，等同于 repeat 零次
'na'.repeat(-0.9) // ""

// 3.如果参数是NaN，等同于repeat零次
'na'.repeat(NaN) // ""

// 4.如果参数是负数或者 Infinity ，会报错
'Hello'.repeat(-1); // RangeError: Invalid count value: -1 at String.repeat 
 
'Hello'.repeat(Infinity);  // RangeError: Invalid count value: Infinity at String.repeat

// 5.如果参数是字符串，会将字符串转为数字
'na'.repeat('hh') // ""
'na'.repeat('2'); // nana
padStart()，padEnd()
  • padStart：表示用参数字符串从头部（左侧）补全原字符串。
  • padEnd：表示用参数字符串从尾部（右侧）补全原字符串。

以上两个方法接受两个参数，第一个参数是指定生成的字符串的最小长度，第二个参数是用来补全的字符串。如果没有指定第二个参数，默认用空格填充.

'z'.padStart(5,'o');  // 'ooooz'
'h'.padEnd(5,'o');    // 'zoooo'
'h'.padStart(5));     // '    h'

// 1.如果指定的长度小于或者等于原字符串的长度，则返回原字符串
'hello'.padStart(5,'A');  // 'hello'

// 2.如果原字符串加上补全字符串长度大于指定长度，则截去超出位数的补全字符串

'hello'.padEnd(10,',world!'));  // 'hello,worl'

// 3.常见用途是为数值补全位数.
'1'.padStart(10, '0') // "0000000001"
trimStart()，trimEnd()

trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串.

const s = '  abc  ';

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

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

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

matchAll()

该方法返回一个正则表达式在当前字符串的所有匹配

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

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

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

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

参考文献

《ES6-ECMAScript6简介》

后记

以上就是本期 ES6 相关的内容，希望对小伙伴们更好的掌握这方面的知识点有些许帮助，后续持续更新。。。

avatar
文章
阅读
粉丝