ES6之字符串的扩展

杂项介绍

"\u{20BB7}"// "𠮷""\u{41}\u{42}\u{43}"// "ABC"let hello = 123;hell\u{6F} // 123'\u{1F680}' === '\uD83D\uDE80'// true// JavaScript 共有 6 种方法可以表示一个字符'\z' === 'z'  // true'\172' === 'z' // true'\x7A' === 'z' // true'\u007A' === 'z' // true'\u{7A}' === 'z' // true

for (let codePoint of 'foo') {  console.log(codePoint) // "f"     "o"     "o"}let text = String.fromCodePoint(0x20BB7);  //  "\uD842\uDFB7" "\u{20BB7}"for (let i = 0; i < text.length; i++) {  console.log(text[i]);     // " "      " "}for (let i of text) {  console.log(i);   // "𠮷"}

JSON.stringify('\u{D834}') // ""\\uD834""JSON.stringify('\uDF06\uD834') // ""\\udf06\\ud834""

模板字符串

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

function SaferHTML(templateData) {  let s = templateData[0];  for (let i = 1; i < arguments.length; i++) {    let arg = String(arguments[i]);    // Escape special characters in the substitution.    s += arg.replace(/&/g, "&amp;")            .replace(/</g, "&lt;")            .replace(/>/g, "&gt;");    // Don't escape special characters in the template.    s += templateData[i];  }  return s;}let sender = '<script>alert("abc")</script>'; // 恶意代码let message = SaferHTML`<p>${sender} has sent you a message.</p>`;

i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`// "欢迎访问xxx，您是第xxxx位访问者！"

jsx`  <div>    <input      ref='input'      onChange='${this.handleChange}'      defaultValue='${this.state.value}' />      ${this.state.value}   </div>`

console.log`123`// ["123", raw: Array[1]]tag`First line\nSecond line`function tag(strings) {  console.log(strings.raw[0]);  // strings.raw[0] 为 "First line\\nSecond line"  // 打印输出 "First line\nSecond line"}

新增方法

String.fromCodePoint()

String.fromCodePoint(0x20BB7)// "𠮷"String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'// true

String.raw()

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

charCodeAt

let s = '𠮷a';s.codePointAt(0) // 134071s.codePointAt(1) // 57271s.codePointAt(2) // 97s.codePointAt(0).toString(16) // "20bb7"s.codePointAt(2).toString(16) // "61"

let s = '𠮷a';for (let ch of s) {  console.log(ch.codePointAt(0).toString(16));}// 等效于let arr = [...'𠮷a']; // arr.length === 2arr.forEach(  ch => console.log(ch.codePointAt(0).toString(16)));

function is32Bit(c) {  return c.codePointAt(0) > 0xFFFF;}is32Bit("𠮷") // trueis32Bit("a") // false

normalize

• NFC，默认参数，表示“标准等价合成”（Normalization Form Canonical Composition），返回多个简单字符的合成字符。所谓“标准等价”指的是视觉和语义上的等价

• NFD，表示“标准等价分解”（Normalization Form Canonical Decomposition），即在标准等价的前提下，返回合成字符分解的多个简单字符。

• NFKC，表示“兼容等价合成”（Normalization Form Compatibility Composition），返回合成字符。所谓“兼容等价”指的是语义上存在等价，但视觉上不等价，比如“囍”和“喜喜”。（这只是用来举例，normalize 方法不能识别中文。）

• NFKD，表示“兼容等价分解”（Normalization Form Compatibility Decomposition），即在兼容等价的前提下，返回合成字符分解的多个简单字符。

'\u01D1'==='\u004F\u030C' //false'\u01D1'.normalize() === '\u004F\u030C'.normalize() // true'\u01D1'.length // 1'\u004F\u030C'.length // 2

includes(), startsWith(), endsWith()

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

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

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

let s = 'Hello world!';s.startsWith('Hello') // trues.endsWith('!') // trues.includes('o') // true// 支持指定搜索的位置。s.startsWith('world', 6) // trues.endsWith('Hello', 5) // trues.includes('Hello', 6) // false

repeat()

'x'.repeat(3) // "xxx"'hello'.repeat(2) // "hellohello"'na'.repeat(0) // ""// 小数会被取整'na'.repeat(2.9) // "nana"// 负数或者Infinity，会报错RangeError'na'.repeat(Infinity)'na'.repeat(-1)

'na'.repeat(-0.9) // ""'na'.repeat(NaN) // ""'na'.repeat('na') // ""'na'.repeat('3') // "nanana"

padStart()，padEnd()

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

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'
'abc'.padStart(10, '0123456789') // '0123456abc'

// 常见用途 - 数值补全指定位数
'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"

// 常见用途 - 提示字符串格式
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

trimStart()，trimEnd()

matchAll()