ES5的實例方法

11.png

ES6 字符串擴展方法

1,字符的Unicode表示法 (略)
2,codePointAt() (略)
3,String.fromCodePoint() (略)
4,normalize()
5,for...of循環(huán)遍歷
6,at() 類似charAt() 并對中文有效
7,includes(), startsWith(), endsWith() 類似indexof()
8,repeat() 原字符串重復n次
9,padStart()，padEnd() string補全
10,模板字符串
11,實例：模板編譯
12,String.raw()
13,模板字符串的限制

下面列出常用的ES6 常用的string方法

at()

優(yōu)點：可以識別Unicode編號大于0xFFFF的字符，返回正確的字符。

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

includes(),startsWith(),endsWith()

以前使用 indexOf 方法只能判斷是否包含在另一個字符串內，現在提供了新的方法。
includes(); 是否找到了參數字符串。
startsWith(); 是否在頭部。
endsWith(); 是否在尾部。

let str = "Hello world!";
str.includes("wo");  // true
str.startsWith("Hello");      //  true
str.endsWith("!");       //  true
// 第二個參數為開始搜索位置
str.includes("Hello", 0);  // true
str.startsWith("Hello", 0);      //  true
str.endsWith("Hello", 5);       //  true
// endsWith 針對的前幾個字符

repeat()

• repeat(n) 返回一個將原字符串重復 n 的次的新字符串
• 參數是小數會取整，字符串會轉換成數字
• 參數是 0-1之間的小數，則等于0
• 參數為負數，會拋出錯誤
• NaN 等同于0

"s".repeat(2);       //  "ss"
"s".repeat(-0.2);    //  ""
"s".repeat(NaN);     //  ""
"s".repeat("2");    //  "ss"

padStart()，padEnd()

• ES7 推出的字符串長度補全功能
• padStart 用于頭部補全
• padEnd 用于尾部補全
• 接受兩個參數，第一個參數指定字符串的最小長度，第二個參數用來補全的字符串（為空時用空格補全）
• 如果原字符串長度等于或大雨指定的最小長度，則返回原字符串

"s".padStart(2, "j");  //  "js"
"s".padEnd(2, "j");  //  "sj"

padStart的常見用途是為數值補全指定位數。
另一個用途是提示字符串格式。

'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"

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

字符串的遍歷器接口

字符串可以使用for...of來進行遍歷，使用for...in或for循環(huán)，都會將32位的UTF-16字符當做2個字符處理，出現錯誤

var s="??a"
for(let item of s){
    console.log(item.codePointAt(0).toString(16))
}
//20BB7
//61



var s="??a"
for(let item in s){
    console.log(s[item].codePointAt(0).toString(16))
}
//d842
//dfb7
//61


var s="??a"
for(let item=0;item<s.length;item++){
    console.log(s[item].codePointAt(0).toString(16))
}
//d842
//dfb7
//61

模版字符串

• 模版字符串是用（`）標識，而不是（'）單引號
• 可以放入任意javascript表達式
• 花括號內部是字符串，則輸出字符串

let str = 'world!';
console.log(`Hello ${str}`);  //  "Hello world!"

function fn(){
  return "Hello world!"
}
console.log(`${fn()}`);  //  "Hello world!"

實例：模版編譯 ${basket.count}

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

該模版使用<%...%> 放置javaScript代碼，使用<%=...%>輸出javaScript表達式
一種思路是將其轉換為javaScript表達式字符串，然后將內容拼接起來

var outPut="";
function echo(html){
    outPut+=html
}

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

模板字符串

var x = 1;
var y = 2;

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

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

var obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// 3
function fn() {
  return "Hello World";
}

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

String.raw

這個方法充當模板字符串的處理函數，返回一個斜杠都被轉義，變量被替換的字符串。

String.raw`Hi\n${2+3}!`;
// "Hi\\n5!"

String.raw`Hi\u000A!`;
// 'Hi\\u000A!'

標簽模版

模版字符串換緊跟在一個函數名后面，該函數將被調用來處理這個模版字符串，這被稱為‘標簽模版’功能
標簽模版其實不是模版，只是函數調用的一種特殊形式，標簽就是函數名，緊跟在后面的模版字符串就是它的參數

function tag(stringArr,value1,value2){
    console.log(stringArr);
    console.log(value1);
    console.log(value2);
}
var a=5;
var b=10;
tag`Hello ${a+b} word ${a*b}`;
//["Hello ", " word ", ""]
//15
//50