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新特性--字符串》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 查找一个字符串中最长不含重复字符的子字符串,计算该最长子字符串的长度
- 字符串、字符处理总结
- 高频算法面试题(字符串)leetcode 387. 字符串中的第一个唯一字符
- php删除字符串最后一个字符
- (三)C语言之字符串与字符串函数
- 算法笔记字符串处理问题H:编排字符串(2064)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。