ES6新特性--字符串

字符串是重要是数据类型之一，正则表达式赋予开发者更多操作字符串的能力。该篇文章主要介绍ES6中新添一些字符串特性、方法以及正则表达式。

1、字符串、编码单元的概念

字符串指的由一个个单个字符拼接而成，如"test123"，表示1个字符串，该字符串包括7个字符；

16位(bit)的0、1编码组成一个编码单元。

2、length属性

字符串的length属性只对字符串有效，length返回的是字符串编码单元的数量。对于32位编码表示的字符其length值为2。

let num=123;
let b=null;
let str="test123";
console.log(num.length);        //undefined
console.log(b.length);          //报错
console.log(str.length);        //7

let text="  ";
console.log(text.length);       //2

3、超过16位编码的字符表示

当字符编码超过16位后,比如日语，采用代理对表示该字符，即采用32位编码表示该字符。此时需要采用{}识别超出(uffff)范围的编码

console.log(\u7f16);          //"编"          
console.log(\u{20bff});       //"  "

4、charAt()、charCodeAt()、codePointAt()

charAt(0)表示获取16位编码表示的单个字符

charCodeAt(0)表示获取单个字符的十六进制编码，如果字符为32为编码，则获取的是前16位编码单元对应的数值。

codePointAt(0)表示获取单个字符的十六进制编码，如果字符为32为编码，则获取的是32位编码单元对应的数值。

如果字符为16位编码，则charCodeAt()方法和codePointAt()方法返回的值一致，都是16位编码单元对应的数值。

var a="编";                              //16位编码表示的字符
console.log(a.charAt(0));               //"编"
console.log(a.charCodeAt(0));           //"32534"
console.log(a.codePointAt(0));          //"32534"

var b="  ";                             //32位编码表示的字符
console.log(b.charAt(0));              //无法打印出该字符
console.log(b.charCodeAt(0));          //"55362"
console.log(b.charCodeAt(1));          //"57343"
console.log(b.codePointAt(0));         //"134143"

## 如何判断一个字符采用 16bit or 32bit 编码？ ##
var a="  ";
if(a.codePointAt(0)>0xffff){
    //32bit编码
}else{
    //16bit编码
}

5、normalize()方法

如果需要对字符串进行 排序 或比较操作时，最好对字符串先进行标准化处理。如开发国际化应用时，一个字符（e.g：日语）采用两个16位编码表示。如果不标准化直接处理，则有可能出错。但在平时开发中若没有考虑过Unicode标准化问题，则不必考虑采用该方法对字符串处理。

再比如代表相同文本的两个字符串可能包含着不同的码位序列。如"æ"和"ae"可以互换使用，但是严格来讲它们不是等效的，但可以通过normalize()方法标准化。

let normalized=values.map(function(text){
    return text.normalize();
});
normalized.sort(function(first,second){
    if(first<second){
        return -1;
    }else if(first===second){
        return 0;
    }else{
        return 1;
    }
})

6、字符串新增方法

endsWith()--在字符串结束部分检测到指定文本，则返回true，否则返回false

startsWith()--在字符串开始部分检测到指定文本，则返回true，否则返回false

includes()--在字符串中检测到指定文本，则返回true，否则返回false

repeat(n)--返回字符串重复n次后的结果

padStart(8,'0')--第一个参数是限制字符串的长度，第二个前面要补的内容

padEnd(8,'0')--第一个参数是限制字符串的长度，第二个后面要补的内容

let str='hello girls';
console.log(str.startsWith("h"));       //从索引为0的位置匹配
console.log(str.startsWith("g",6));     //从索引为6，即第7个位置开始匹配
console.log(str.endsWith("s"));         //默认从最后一个位置向前匹配
console.log(str.endsWith("e",2));       //从索引为1的位置向前匹配
console.log(str.includes("ls"));        //从索引0位置开始匹配
console.log(str.repeat(2));          //"hello girlshello girls"
console.log(str.padStart(13,'!'));   //"!!hello girls"
console.log(str.padEnd(13,'!'));     //"hello girls!!"

7、正则表达式

a、u修饰符：当未使用u修饰符时，匹配编码单元(16bit)；使用u修饰符后匹配的是字符。

//  占用两个编码单元
/^.$/.test("  ");        //false
/^.$/u.test("  ");       //true

//采用try catch()检测浏览器是否支持u
try{
    var pattern=new RegExp("abc","u");
    return true;
}catch(error){
    return false;
}

b、y修饰符：它会影响正则表达式搜索过程中的sticky属性，当字符串中开始字符匹配时，它会通知从正则表达式的lastIndex属性开始进行，如果在指定位置没能匹配成功，则停止继续匹配。

var text="hello1 hello2 hello3",
    pattern=/hello\d\s?/,
    result=pattern.exec(text),
    globalPattern=/hello\d\s?/g,
    globalResult=globalPattern.exec(text),
    stickyPattern=/hello\d\s?/y,
    stickyResult=stickyPattern.exec(text);

console.log(result,pattern.lastIndex);               //[ 'hello1 ', index: 0, input: 'hello1 hello2 hello3' ] 0
console.log(globalResult,globalPattern.lastIndex);   //[ 'hello1 ', index: 0, input: 'hello1 hello2 hello3' ] 7
console.log(stickyResult,stickyPattern.lastIndex);   //[ 'hello1 ', index: 0, input: 'hello1 hello2 hello3' ] 7

result=pattern.exec(text);                 //从索引0开始匹配
globalResult=globalPattern.exec(text);     //从索引7开始匹配
stickyResult=stickyPattern.exec(text);     //从索引7开始匹配
console.log(result,pattern.lastIndex);               //[ 'hello1 ', index: 0, input: 'hello1 hello2 hello3' ] 0
console.log(globalResult,globalPattern.lastIndex);   //[ 'hello2 ', index: 7, input: 'hello1 hello2 hello3' ] 14
console.log(stickyResult,stickyPattern.lastIndex);   //[ 'hello2 ', index: 7, input: 'hello1 hello2 hello3' ] 14

pattern.lastIndex=1;                
globalPattern.lastIndex=1;
stickyPattern.lastIndex=1;
result=pattern.exec(text);                 //忽略对lastIndex的修改，从0开始匹配
globalResult=globalPattern.exec(text);     //从第二个字符e开始匹配
stickyResult=stickyPattern.exec(text);     //从第二个字符e开始匹配
console.log(result,pattern.lastIndex);               //[ 'hello1 ', index: 0, input: 'hello1 hello2 hello3' ] 1
console.log(globalResult,globalPattern.lastIndex);   //[ 'hello2 ', index: 7, input: 'hello1 hello2 hello3' ] 14
console.log(stickyResult,stickyPattern.lastIndex);   //抛出错误。由于从第二个位置匹配不到相应字符串，就此终止，因此结果为null 0

c、正则表达式的复制

var re1=/ab/i;

var re2=new RegExp(re1,"g"); //rel为/ab/g

re1与re2无关，改变其中一个并不会影响另一个。

d、新增正则属性

let re=/ab/g;
re.source;    //"ab" 表示正则表达式文本
re.flags;     //"g"  表示正则表达式修饰符

8、模板字面量

模板字符串提供三方面能力：

a、多行字符串

let str=`
    hello                  /输出两行，并且每行都有缩进
    world
`

b、字符串占位符

变量占位符允许将任何有效的JS表达式嵌入到模板字面量中，并将其结果输出为字符串的一部分

let name='nicholas',
    message=`hello,${
        `my name is ${name}`
    }.`;
console.log(message);

c、标签模板

function passthru(literals,...substitutions){
    //literals中保存的有a、第一个占位符前的空字符串("")；b、第一、二个占位符之间的字符串；c、第二个占位符后的字符串(".")
    let result="";
    for(let i=0;i<substitutions.length;i++){
        result+=literals[i];
        result+=substitutions;
    }
    return result;
}
let count=10,
    price=0.25,
    message=passthru`${count} items cost $${(count*price).toFixed(2)}.`;
console.log(message);       //10 items cost $2.50

标签模板的应用(##注：以下内容转自 http://www.cnblogs.com/xiaohu... ，侵删##)：

a、过滤用户输入，防止用户恶意输入

var message =
  SaferHTML`<p>${sender} has sent you a message.</p>`;

function SaferHTML(templateData) {
  var s = templateData[0];
  for (var i = 1; i < arguments.length; i++) {
    var arg = String(arguments[i]);

    // Escape special characters in the substitution.
    s += arg.replace(/&/g, "&")
            .replace(/</g, "<")
            .replace(/>/g, ">");

    // Don't escape special characters in the template.
    s += templateData[i];
  }
  return s;
}

上面代码中，sender变量往往是用户提供的，经过SaferHTML函数处理，里面的特殊字符都会被转义

var sender = '<script>alert("abc")</script>'; // 恶意代码
var message = SaferHTML`<p>${sender} has sent you a message.</p>`;
console.log(message);// <p><script>alert("abc")</script> has sent you a message.</p>

b、标签模板的另一个应用，就是多语言转换（国际化处理）

i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`
// "欢迎访问xxx，您是第xxxx位访问者！"