ES6之主要知識點(三)字符串
阿新 • • 發佈:2017-09-15
lis 如果 rip int() 變量 world time des 參數 )。
引自: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之主要知識點(三)字符串