[学习笔记]03.字符串的扩展

一：字符的 Unicode 表示法

JavaScript允许表示\u0000—\uFFFF之间的字符。超出这个范围，必须用2个双字节的形式表达。

如："\u20BB7"是汉字 "𠮷" 的编码，要使用如下方法表示：

"\uD842\uDFB7"

// "𠮷 "

 

如果直接用"\u20BB7" 会表示成：

"\u20BB7"

// " 7"

 

这是因为\u后面跟上超出范围的数值，JavaScript会理解成\u20BB+7。由于\u20BB是一个不可打印的字符，所以只会显示一个空格，后面跟一个7。而ES6允许将码点放入大括号，就能正确解读该字符。

"\u{20BB7}"

// " ? "

"\u{41}\u{42}\u{43}"

// "ABC"

 

有了这种表示法之后， JavaScript 共有 6 种方法可以表示一个字符。

'\z' === 'z' // true

'\172' === 'z' // true

'\x7A' === 'z' // true

'\u007A' === 'z' // true

'\u{7A}' === 'z' // true

 

二：at()

ES5 对字符串对象提供charAt方法，返回字符串给定位置的字符。该方法不能识别码点大于0xFFFF的字符。

'abc'.charAt(0) // "a"

'𠮷 '.charAt(0) // "\uD842"

 

目前，有一个提案，提出字符串实例的at方法，可以识别 Unicode 编号大于0xFFFF的字符，返回正确的字符。

'abc'.at(0) // "a"

'𠮷 '.at(0) // "𠮷"

 

三：includes(), startsWith(), endsWith()

传统上， JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。 ES6 又提供了三种新方法。

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

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

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

 

var s = 'Hello world!';

s.startsWith('Hello') // true

s.endsWith('!') // true

s.includes('o') // true

 

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

var s = 'Hello world!';

s.startsWith('world', 6) // true

s.endsWith('Hello', 5) // true

s.includes('Hello', 6) // false

 

四：repeat()

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

'x'.repeat(3) // "xxx"

'hello'.repeat(2) // "hellohello"

'na'.repeat(0) // ""

 

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

'na'.repeat(2.9) // "nana"

 

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

'na'.repeat(Infinity)

// RangeError

'na'.repeat(-1)

// RangeError

 

五：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'

 

上面代码中，padStart和padEnd一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。

 

 六:模板字符串

传统的 JavaScript 语言，输出模板通常是这样写的。

$('#result').append(

'There are <b>' + basket.count + '</b> ' +

'items in your basket, ' +

'<em>' + basket.onSale +

'</em> are on sale!'

);

 

上面这种写法相当繁琐不方便， ES6 引入了模板字符串解决这个问题。

$('#result').append(`

There are <b>${basket.count}</b> items

in your basket, <em>${basket.onSale}</em>

are on sale!

`);

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

嵌入变量。

以前的字符串连接都是用引号连接，换行的时候繁琐麻烦，现在的这种模版字符串改变了以前换行麻烦，所有的空格与缩进都保留在输出之中。

 

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

function authorize(user, action) {

if (!user.hasPrivilege(action)) {

throw new Error(

// 传统写法为

// 'User '

// + user.name

// + ' is not authorized to do '

// + action

// + '.'

`User ${user.name} is not authorized to do ${action}.`);

}

}

 

七:标签模版

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

alert`123`

// 等同于

alert(123)

 

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

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

 

var a = 5;

var b = 10;

tag`Hello ${ a + b } world ${ a * b }`;

// 等同于

tag(['Hello ', ' world ', ''], 15, 50);

 

上面代码中，模板字符串前面有一个标识名tag，它是一个函数。整个表达式的返回值，就是tag函数处理模板字符串后的返回值。