ES6新特性--字符串

栏目: JavaScript · 发布时间: 5年前

内容简介:字符串是重要是数据类型之一,正则表达式赋予开发者更多操作字符串的能力。该篇文章主要介绍ES6中新添一些字符串特性、方法以及正则表达式。1、字符串、编码单元的概念字符串指的由一个个单个字符拼接而成,如"test123",表示1个字符串,该字符串包括7个字符;

字符串是重要是数据类型之一,正则表达式赋予开发者更多操作字符串的能力。该篇文章主要介绍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位访问者!"

以上所述就是小编给大家介绍的《ES6新特性--字符串》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

在线

在线

王坚 / 中信出版集团 / 2018-5-21 / 59.00元

50多万年前的关键词是光明与黑暗, 50多年前的关键词是数字和模拟, 而今天的关键词是在线与离线。 移动互联网是比传统互联网在线程度更深的互联网。对于真正成熟的互联网来说,手机只是诸多的在线设备之一,慢慢地,每一个设备都会变成互联网的终端。 真正的竞争力,是把所有人都可能拥有的东西变成财富,让沙子变成硅。大家都把大数据当作金矿,想要掘金。但在王坚看来,大数据的厉害之处是把沙......一起来看看 《在线》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具