ES6 -- （3）字符串的扩展和新增方法

2019-10-31

学习内容：

一、关于Unicode码和码点的暂时忽略

　　ES5不能识别大于0xFFFF的码点，在ES6修复，导致一系列的改动。

二、字符串的遍历接口：

　　ES6 为字符串添加了遍历器接口（详见《Iterator》一章），使得字符串可以被for...of循环遍历。

三、模版字符串：

　　传统的 JavaScript 语言，输出模板通常是这样写的（下面使用了 jQuery 的方法）

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

　（1）ES6模版字符串：

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

　　区别：省略大量+号，用反引号（`）标识。

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

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

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

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

　　　　　4、如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。

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

let x = 1;
let y = 2;

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

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

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

（3）模板字符串中能调用函数：

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

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

（4）模版字符串的嵌套：

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>

🌟（7）标签函数：

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

alert`123`
// 等同于
alert(123)

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

　　因为没有条件判断和循环处理功能。

　　模板字符串前面有一个标识名tag，它是一个函数。整个表达式的返回值，就是tag函数处理模板字符串后的返回值。这是由于，标签函数第一个参数接受字符串数组，后面才是变量。

let a = 5;
let b = 10;

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

　　另一个例子：https://zhuanlan.zhihu.com/p/31687266

function greet(arg1, arg2, arg3){
  console.log(arg1);
  console.log(arg2);
  console.log(arg3);
}


// tag 函数
greet`I'm ${name}. I'm ${age} years old.`、

// 最终输出
[ 'I\'m ', '. I\'m ', ' years old.' ]
Alfred
47

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

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

四、字符串的新增方法：

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

// ES5:
String.fromCharCode(0x20BB7)
// "ஷ"


// ES6：
String.fromCodePoint(0x20BB7)
// "𠮷"

　　2、ES6 还为原生的 String 对象，提供了一个raw()方法。该方法返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，往往用于模板字符串的处理方法。String.raw()方法可以作为处理模板字符串的基本方法，它会将所有变量替换，而且对斜杠进行转义，方便下一步作为字符串来使用。

String.raw`Hi\n${2+3}!`
// 实际返回 "Hi\\n5!"，显示的是转义后的结果 "Hi\n5!"

String.raw`Hi\u000A!`;
// 实际返回 "Hi\\u000A!"，显示的是转义后的结果 "Hi\u000A!"

　　3、JavaScript 内部，字符以 UTF-16 的格式储存，每个字符固定为2个字节。对于那些需要4个字节储存的字符（Unicode 码点大于0xFFFF的字符），JavaScript 会认为它们是两个字符。针对这个问题，ES6 提供了codePointAt()方法，能够正确处理 4 个字节储存的字符，返回一个字符的码点。

let s = '𠮷a';

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

s.codePointAt(2) // 97

　　汉字“𠮷”（注意，这个字不是“吉祥”的“吉”）的码点是0x20BB7，UTF-16 编码为0xD842 0xDFB7（十进制为55362 57271），需要4个字节储存。对于这种4个字节的字符，JavaScript 不能正确处理，字符串长度会误判为2，而且charAt()方法无法读取整个字符，charCodeAt()方法只能分别返回前两个字节和后两个字节的值。总之，codePointAt()方法会正确返回 32 位的 UTF-16 字符的码点。对于那些两个字节储存的常规字符，它的返回结果与charCodeAt()方法相同。

　　codePointAt()方法返回的是码点的十进制值，如果想要十六进制的值，可以使用toString()方法转换一下。

注意：你可能注意到了，codePointAt()方法的参数，仍然是不正确的。比如，上面代码中，字符a在字符串s的正确位置序号应该是 1，但是必须向codePointAt()方法传入 2。

　　解决这个问题的一个办法是使用for...of循环，因为它会正确识别 32 位的 UTF-16 字符。

let s = '𠮷a';
for (let ch of s) {
  console.log(ch.codePointAt(0).toString(16));
}
// 20bb7
// 61

　　另一种方法也可以，使用扩展运算符（...）进行展开运算。

let arr = [...'𠮷a']; // arr.length === 2
arr.forEach(
  ch => console.log(ch.codePointAt(0).toString(16))
);
// 20bb7
// 61

　　测试一个字符由两个字节还是由四个字节组成的最简单方法：codePointAt()方法。

function is32Bit(c) {
  return c.codePointAt(0) > 0xFFFF;
}

is32Bit("𠮷") // true
is32Bit("a") // false

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

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

　　这三个方法都支持第二个参数，表示开始搜索的位置。使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

let s = 'Hello world!';

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

　　5、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

// NaN等同于0:
'na'.repeat(NaN) // ""

// 参数是字符串时，会先尝试转成数字：
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"


//  0 到-1 之间的小数，则等同于 0
'na'.repeat(-0.9) // ""

　　6、padStart()用于头部补全，padEnd()用于尾部补全。第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串（默认是空格）。

　　注意：如果原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串。

　　　　　如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串。

　　　　　常用用途是提示字符串格式：

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

　　7、trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。除了空格键，这两个方法对字符串头部（或尾部）的 tab 键、换行符等不可见的空白符号也有效。

const s = '  abc  ';

s.trim() // "abc"
s.trimStart() // "abc  "
s.trimEnd() // "  abc"

posted @ 2019-10-31 13:42 Marvin_Tang 阅读(414) 评论(0) 编辑收藏举报

刷新页面返回顶部

Marvin_Tang