es6入门笔记-字符串

发表于

es6中改进的字符表示，新增方法。

Unicode表示法

js允许\uxxxx表示\u0000~\uFFFF之间的字符，超出范围须用两个双字节的形式表示。
针对这一点，es6改进可通过\u{xxxx}的方式来实现。

1
2
3
4
5
6
7
'\z' === 'z'  // true
'\172' === 'z' // true      8进制
'\x7A' === 'z' // true      16进制
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true

'\u{1F680}' === '\uD83D\uDE80'// true 🚀

点击跳转Unicode详细介绍。

String.prototype.codePointAt(pos)

相对于String.prototype.charCodeAt()返回0到65535,处理UTF-16的单一编码。
该方法能够正确处理 4 个字节储存的字符，传入元素索引的位置，返回在字符串中的给定索引的编码单元体现的数字，未找到返回undefind。字符为两个字节时，返回结果同charCodeAt方法相同。

1
2
3
4
5
6
7
8
let s = '𠮷a';

s.codePointAt(0) // 134071
s.codePointAt(1) // 57271
s.codePointAt(2) // 97

s.codePointAt(0).toString(16) // "20bb7"
s.codePointAt(2).toString(16) // "61"

对于上例中a的下标为2，而不是1，可以通过for...of...来解决。

1
2
3
4
5
6
7
8
9
10
11
let s = '𠮷a';
for (let ch of s) {
  console.log(ch.codePointAt(0).toString(16));
}

//简单应用
function is32Bit(c) {
  return c.codePointAt(0) > 0xFFFF;
}
is32Bit("𠮷") // true
is32Bit("a") // false

String.fromCodePoint(num1[, …[, numN]])

相对于String.fromCharCode(num1, ..., numN)不能识别大于0xFFFF的码点。如果大于，最高位2被舍弃。
该静态方法返回使用指定的代码点序列创建的字符串。传入一串 Unicode 编码(多参数会合并)，返回 Unicode 编码创建的字符串。参数异常，抛出RangeError。

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

字符遍历器for…of

相对于传统for，优点是可以识别大于0xFFFF的码点

1
2
3
4
5
6
7
8
9
10
11
let text = String.fromCodePoint(0x20BB7);

for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// " "
// " "
for (let i of text) {
  console.log(i);
}
// "𠮷

String.prototype.normalize()

按照指定的一种 Unicode 正规形式将当前字符串正规化。传入了非法的参数值, 则会抛出 RangeError 异常.默认NFC形式。

1
2
3
4
5
6
7
var str = "\u1E9B\u0323";
str.normalize("NFC"); // "\u1E9B\u0323"
str.normalize(); // same as above

str.normalize("NFD");// "\u017F\u0323\u0307"
str.normalize("NFKC"); // "\u1E69"
str.normalize("NFKD"); // "\u0073\u0323\u0307"

includes(), startsWith(), endsWith()

相对于js只有indexof()方法，es6新增三种.

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

第一个参数为需要搜索的字符，第二个参数为开始搜索的位置。endsWith的第二个参数为前N个字符搜索。

1
2
3
4
5
6
7
8
9
let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

String.prototype.repeat()

构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本。参数为负数或infinite，抛出RangeError错误。

1
2
3
4
5
'x'.repeat(3) // "xxx"
'na'.repeat(0) // ""
'na'.repeat(Infinity)// RangeError
'na'.repeat(-1)// RangeError
'na'.repeat(NaN) // ""

padStart()，padEnd()

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。
第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。第二个参数省略时，用空格代替。

1
2
3
4
5
6
7
8
9
10
11
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

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

'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '
//常用
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

模板字符串

ES6 引入反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。定义多行字符串时，空格会被保留。

1
2
3
4
5
6
7
8
9
10
// 普通字符串
`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}?`

标签模板

模板字符串可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。

1
2
3
alert`123`
// 等同于
alert(123)

String.raw()

es6为原生String 对象，提供了一个raw方法。用来充当模板字符串的处理函数，返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，对应于替换变量后的模板字符串。

如果原字符串的斜杠已经转义，那么String.raw不会做任何处理。

1
2
3
4
String.raw`Hi\n${2+3}!`;
// "Hi\\n5!"
String.raw`Hi\u000A!`;
// 'Hi\\u000A!'

参考链接
http://es6.ruanyifeng.com/#docs/string

------本文结束 感谢阅读------