ES6字符串扩展

91 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第1天,点击查看活动详情

字符串扩展

  1. ES6提供了codePointAt方法,能够正确处理4个字节储存的字符,返回一个字符的码点。
  2. ES6提供了String.fromCodePoint方法,可以识别0xFFFF的字符,弥补了String.fromCharCode方法的不足。在作用上,正好与codePointAt方法相反。
  3. 字符串的遍历器接口
for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

这个遍历器最大的优点是可以识别大于0xFFFF的码点

  1. at()

可以识别Unicode编号大于0xFFFF的字符,返回正确的字符。

  1. normalize()

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

  1. ES6又提供了三种新方法。
  • includes():返回布尔值,表示是否找到了参数字符串。
  • startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
  • endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。

这三个方法都支持第二个参数,表示开始搜索的位置。

  1. repeat()

repeat方法返回一个新字符串,表示将原字符串重复n次。

参数如果是小数,会被取整。

如果repeat的参数是负数或者Infinity,会报错。

  'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

参数NaN等同于0。 如果repeat的参数是字符串,则会先转换成数字

  1. padStart(),padEnd()

ES7推出了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart用于头部补全,padEnd用于尾部补全。

如果省略第二个参数,则会用空格补全长度。

'x'.padStart(5'ab'// 'ababx'
'x'.padStart(4'ab'// 'abax'

'x'.padEnd(5'ab'// 'xabab'
'x'.padEnd(4'ab'// 'xaba'

另一个用途是提示字符串格式。

  1. 模板字符串

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

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

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

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

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

模板字符串中嵌入变量,需要将变量名写在${}之中。

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

var x = 1;
var y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

var obj = {x1y2};
`${obj.x + obj.y}`
// 3

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

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

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
  1. 实例:模板编译
  2. 标签模板

模板字符串的功能,不仅仅是上面这些。它可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能(tagged template)。

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

标签模板其实不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。

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

let a = 5;
let b = 10;

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