ES6:字符串的扩展

160 阅读2分钟

字符的 Unicode 表示法

  • ES6允许用\uxxxx表示一个字符,xxxx表示字符unidode码点
  • 这种表示法仅限码点在\u0000~\uFFFF之间的字符,超出则需要用双字节形式

    "\u20BB7"会被解释成\u20BB+7,由于\u20BB是一个不可打印字符,只会显示一个空格,后面再跟一个7

  • 如果将码点放入大括号就能被正确解释
    "\u{20BB7}"
    // "𠮷"
    
    "\u{41}\u{42}\u{43}"
    // "ABC"
    
    let hello = 123;
    hell\u{6F} // 123
    
    '\u{1F680}' === '\uD83D\uDE80'
    // true
    

字符串的遍历器接口

  • ES6为字符串提供遍历器接口
  • 可以使用for-of循环遍历
for(let i of 'foo'){
	console.log(i)
}
//f
//o
//o
  • 使用for-of循环还可以正确识别大于0xffff的码点,用普通的for循环做不到
	let text = String.fromCodePoint('0x20BB7')
	for(let i of text){
		console(i)
	}
	// "𠮷"
  • 此处的text只有一个字符串,若用普通的for循环则会被认定有两个字符串

直接输入 U+2028 和 U+2029

  • js有五个字符不能在字符串直接使用,只能用转义
    • 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.stringify()改造

  • ES2019 改变了JSON.stringify()的行为。如果遇到0xD800到0xDFFF之间的单个码点,或者不存在的配对形式,它会返回转义字符串,留给应用自己决定下一步的处理。

模板字符串

  • ES6引入模板字符串
	$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);
  • 用反引号标识
// 普通字符串
`In JavaScript '\n' is a line-feed.`

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

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
  • 使用模板字符串的多行字符串的空格和缩进都会被保留
  • 使用${}嵌入变量,变量可以是函数,任意js表达式
  • 模板字符串可以嵌套
	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>

标签模板

  • 模板字符串可紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串,这被称为‘标签模板’功能
alert`hello`
// 等同于
alert(['hello'])
  • 如果模板字符串中有变量,则函数会先将字符串处理成多个参数,再调用函数