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

Posted 坚持不懈?

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6之主要知识点(三)字符串相关的知识,希望对你有一定的参考价值。

引自: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表达式。

 

以上是关于ES6之主要知识点(三)字符串的主要内容,如果未能解决你的问题,请参考以下文章

ES6之主要知识点数组

ES6之主要知识点Proxy

ES6之主要知识点(五)函数

ES6之主要知识点 变量的解构赋值。默认值

ES6知识点整理之----正则表达式扩展

ES6之Promise用法详解