乐趣区

关于javascript:ES6语法总结字符串新增方法

jiezi

1、String.fromCodePoint()

  • ES5 提供了 String.fromCharCode() 办法，用于从 Unicode 码点返回对应字符，然而这个办法不能识别码点大于 0xFFFF 的字符串
  • ES5 提供了 String.fromCodePoint() 办法，能够辨认大于 0xFFFF 的字符，补救了 String.fromCharCode() 的有余
String.fromCodePoint(0x20BB7) // "????" 
String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y' // true

2、String.raw()

  • 返回一个斜杆都被本义（即斜杠后面再加一个斜杠）的字符串，往往用于模板字符串的解决办法
String.raw`Hi\n${2+3}!` // 理论返回 "Hi\\n5!"，显示的是本义后的后果 "Hin5!" 
String.raw`Hi\u000A!`; // 理论返回 "Hi\\u000A!"，显示的是本义后的后果 "Hi\u000A!"
  • 如果原字符串的斜杠曾经本义，那么 String.raw() 会进行再次本义
String.raw`Hi\\n` // 返回 "Hi\\\\n" 
String.raw`Hi\\n` === "Hi\\\\n" // true
  • 实质上是一个失常的函数，只是专用于模板字符串的标签函数。如果写成失常函数的模式，它的第一个参数，应该是一个具备 raw 属性的对象，且 raw 属性的值应该是一个数组，对应模板字符串解析后的值
// `foo${1 + 2}bar` 
// 等同于 
String.raw({raw: ['foo', 'bar'] }, 1 + 2) // "foo3bar"

3、实例办法：codePointAt()

  • JavaScript 外部，字符以 UTF-16 的格局贮存，每个字符固定为 2 个字节。对于那些须要 4 个字节贮存的字符（Unicode 码点大于 0xFFFF 的字符），JavaScript 会认为它们是两个字符
var s = "????";
s.length // 2 
s.charAt(0) // ''s.charAt(1) //'' 
s.charCodeAt(0) // 55362 
s.charCodeAt(1) // 57271
  • codePointAt()办法返回的是码点的十进制值，如果想要十六进制能够应用 toString() 办法转换一下
// codePointAt()正确处理
let s = '????a';

s.codePointAt(0) // 134071
s.codePointAt(1) // 57271 
s.codePointAt(2) // 97

4、实例办法：normalize()

5、实例办法：includes()、startsWith()、endsWith()

  • ES6 提供了三种新办法：都是返回 boolean 值，都反对第二个参数，示意开始搜寻的地位

    1. includes()：是否找到了参数字符串
    2. startsWith()：参数字符串是否在原字符串结尾
    3. endsWith()：参数字符串是否在原字符串结尾，第二个参数 n 示意针对前 n 个字符

6、实例办法：repeat()

  • 示意将原字符反复 n 次
'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello" 'na'.repeat(0) // ""
  • 参数如果是小数，会被取整
  • 如果 repeat 的参数是正数或者Infinity，会报错
  • 参数是 0 到 -1 之间的小数，则等同于 0
  • 参数 NaN 等同于 0
  • 如果 repeat 的参数是字符串，则会先转换成数字
'na'.repeat('na') // ""'na'.repeat('3') // "nanana"

7、实例办法：padStart()、padEnd()

  • 如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全
'x'.padStart(5, 'ab') // 'ababx' 
'x'.padStart(4, 'ab') // 'abax' 
'x'.padEnd(5, 'ab') // 'xabab' 
'x'.padEnd(4, 'ab') // 'xaba'
  • 如果原字符串的长度，等于或大于最大长度，则字符串补全不失效，返回原字符串
  • 如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串
  • 如果省略第二个参数，默认应用空格补全长度
  • adStart()的常见用处是为数值补全指定位数。上面代码生成 10 位的数值字符串
'1'.padStart(10, '0') // "0000000001" 
'12'.padStart(10, '0') // "0000000012" 
'123456'.padStart(10, '0') // "0000123456"
  • 另一个用处是提醒字符串格局
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12" 这里 12 替换了 DD
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

8、实例办法：trimStart()、trimEnd()

  • ES2019 对字符串实例新增了 trimStart() 和trimEnd()这两个办法。它们的行为与 trim() 统一，trimStart()打消字符串头部的空格，trimEnd()打消尾部的空格。它们返回的都是新字符串，不会批改原始字符串

9、实例办法：matchAll()

  • 办法返回一个正则表达式在以后字符串的所有匹配

10、实例办法：replaceAll()

  • 正则表达式毕竟不是那么不便和直观，ES2021 引入了 replaceAll() 办法，能够一次性替换所有匹配
  • 如果 searchValue 是一个不带有 g 修饰符的正则表达式，replaceAll()会报错。这一点跟 replace() 不同
  • 第二个参数也能够应用一些非凡字符串
// $& 示意匹配的字符串，即 `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'
退出移动版