ES6学习笔记之字符串

Posted 2023-01-11 BennuCTech

字符

javascript 共有 6 种方法可以表示一个字符。比如’z’

'\\z' 
'\\172' 
'\\x7A' 
'\\u007A'
'\\u7A' 

遍历

ES6 为字符串添加了遍历器接口，使得字符串可以被for…of循环遍历。

for (let codePoint of 'foo') 
  console.log(codePoint)

// "f"
// "o"
// "o"

模版字符串

ES6 引入了模板字符串，如下：

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

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串
`In JavaScript '\\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello $name, how are you $time?`

如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

let greeting = `\\`Yo\\` World!`;

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

上面代码中，所有模板字符串的空格和换行，都是被保留的。可以使用trim方法消除。如

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

$内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。

let x = 1;
let y = 2;
`$x + $y = $x + y`
// "1 + 2 = 3"

let obj = x: 1, y: 2;
`$obj.x + obj.y`
// "3"

模板字符串之中还能调用函数。

function fn() 
  return "Hello World";

`foo $fn() bar`
// foo Hello World bar

如果大括号中的值不是字符串，会转为字符串。比如，默认调用对象的toString方法。

如果模板字符串中的变量没有声明，将报错。

由于模板字符串的大括号内部，就是执行 JavaScript 代码，因此如果大括号内部是一个字符串，将会原样输出。

模板字符串甚至还能嵌套。

const tmpl = addrs => `
  <table>
  $addrs.map(addr => `
    <tr><td>$addr.first</td></tr>
    <tr><td>$addr.last</td></tr>
  `).join('')
  </table>
`;

上面代码中，模板字符串的变量之中，又嵌入了另一个模板字符串，使用方法如下。

const data = [
     first: '<Jane>', last: 'Bond' ,
     first: 'Lars', last: '<Croft>' ,
];
console.log(tmpl(data));
// <table>
//
//   <tr><td><Jane></td></tr>
//   <tr><td>Bond</td></tr>
//
//   <tr><td>Lars</td></tr>
//   <tr><td><Croft></td></tr>
//
// </table>

标签字符串

模板字符串可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。

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

如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。

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

第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分，也就是说，变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推。

“标签模板”的一个重要应用，就是过滤 HTML 字符串，防止用户输入恶意内容。

标签模板的另一个应用，就是多语言转换（国际化处理）。

新增方法

fromCodePoint

ES6 提供了String.fromCodePoint()方法，可以识别大于0xFFFF的字符，弥补了String.fromCharCode()方法的不足。

raw

该方法返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，往往用于模板字符串的处理方法。

codePointAt

ES6 提供了codePointAt()方法，能够正确处理 4 个字节储存的字符，返回一个字符的码点。

normalize

ES6 提供字符串实例的normalize()方法，用来将字符的不同表示方法统一为同样的形式，这称为 Unicode 正规化。

includes(), startsWith(), endsWith()

ES6新增了三种方法。注意它们都支持第二个参数，第二个参数表示开始搜索的位置。

repeat

返回一个新字符串，表示将原字符串重复n次。如果是小数则取整；如果是负数则报错，但是如果是(-1,0)之间的则视为0；如果是字符串则转成数字；如果是NaN等同于0；

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()的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。比如001、002、… 100

trimStart()，trimEnd()

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

matchAll

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