ES6新特性--字符串

发布时间:2019-08-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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=/hellods?/,
    result=pattern.exec(text),
    globalPattern=/hellods?/g,
    globalResult=globalPattern.exec(text),
    stickyPattern=/hellods?/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, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");

    // 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>&lt;script&gt;alert("abc")&lt;/script&gt; has sent you a message.</p>

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

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

脚本宝典总结

以上是脚本宝典为你收集整理的ES6新特性--字符串全部内容,希望文章能够帮你解决ES6新特性--字符串所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。