ES6 字符串扩展

ES5的实例方法

11.png

ES6 字符串扩展方法

1,字符的Unicode表示法 (略)
2,codePointAt() (略)
3,String.fromCodePoint() (略)
4,normalize()
5,for...of循环遍历
6,at() 类似charAt() 并对中文有效
7,includes(), startsWith(), endsWith() 类似indexof()
8,repeat() 原字符串重复n次
9,padStart()，padEnd() string补全
10,模板字符串
11,实例：模板编译
12,String.raw()
13,模板字符串的限制

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

at()

优点：可以识别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循环，都会将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