ES6之主要知识点(三）字符串

Posted 2020-10-07 坚持不懈?

引自：http://es6.ruanyifeng.com/#docs/string#codePointAt

• codePointAt()
• String.fromCodePoint()
• at()
• includes(),startsWith(),endsWith()
• repeat()
• padStart(),padEnd()
• 模板字符串
• 模板编译

1.codePointAt()

codePointAt方法的结果与charCodeAt方法相同.

总之，codePointAt方法会正确返回32位的UTF-16字符的码点。对于那些两个字节储存的常规字符，它的返回结果与charCodeAt方法相同。

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

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

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

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

2.String.fromCodePoint()

ES5提供String.fromCharCode方法，用于从码点返回对应字符，但是这个方法不能识别32位的UTF-16字符（Unicode编号大于0xFFFF）。

ES6提供了String.fromCodePoint方法，可以识别大于0xFFFF的字符

String.fromCodePoint(0x20BB7)
// "??"
String.fromCodePoint(0x78, 0x1f680, 0x79) === ‘x\uD83D\uDE80y‘
// true

3.at()

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

at()弥补了不足

‘abc‘.at(0) // "a"
‘??‘.at(0) // "??"

4.includes(),startsWith(),endsWith()

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

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

var s = ‘Hello world!‘;

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

5.repeat()

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

‘na‘.repeat(‘na‘) // ""
‘na‘.repeat(‘3‘) // "nanana"
‘na‘.repeat(NaN) // ""
‘na‘.repeat(Infinity)
// RangeError
‘na‘.repeat(-1)
// RangeError

6.padStart(),padEnd()

如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

‘x‘.padStart(5, ‘ab‘) // ‘ababx‘
‘abc‘.padStart(10, ‘0123456789‘)
‘x‘.padStart(4) // ‘   x‘
‘1‘.padStart(10, ‘0‘) // "0000000001"
‘12‘.padStart(10, ‘YYYY-MM-DD‘) // "YYYY-MM-12"
‘09-12‘.padStart(10, ‘YYYY-MM-DD‘) // "YYYY-09-12"

‘x‘.padEnd(5, ‘ab‘) // ‘xabab‘

7.模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，

也可以用来定义多行字符串，或者在字符串中嵌入变量。

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

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

$(‘#list‘).html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);


//模板字符串之中还能调用函数。
function fn() {
  return "Hello World";
}
`foo ${fn()} bar`
// foo Hello World bar

模板字符串甚至还能嵌套。

const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join(‘‘)}
  </table>
`;

8.模板编译

var template = `
<ul>
  <% for(var i=0; i < data.supplies.length; i++) { %>
    <li><%= data.supplies[i] %></li>
  <% } %>
</ul>
`;

该模板使用<%...%>放置javascript代码，使用<%= ... %>输出JavaScript表达式。