码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-09-15 19:06:35      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:识别   cond   fun   tar   .com   简单方法   模板编译   asc   返回结果   

引自: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之主要知识点(三)字符串

标签:识别   cond   fun   tar   .com   简单方法   模板编译   asc   返回结果   

原文地址:http://www.cnblogs.com/myzy/p/7522059.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!