【深入理解ES6】字符串和正则表达式-Toy模板网

这篇具有很好参考价值的文章主要介绍了【深入理解ES6】字符串和正则表达式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

概念

字符串（String）是JavaScript6大原始数据类型。其他几个分别是Boolean、Null、Undefined、Number、Symbol（es6新增）。

更好的Unicode支持

1. UTF-16码位

字符串里的字符有两种：

前个码位均以16位的编码单元表示的BMP字符(基本多文种平面。
超过的UTF-16引入了代理对，以两个编码单元32位表示辅助平面字符。

ES5中的所有字符串都是基于16位编码单元，如果用同样的付方式处理包含代理对的UTF-16编码字符，得到的结果将与预期不符。

2. codePointAt() 与 charCodeAt()

codePointAt() 方法接受编码单元的位置而非字符位置作为参数，返回字符串中给定位置对应的码位（整数值）。

//a字符串中第一个字符是非BMP的，包含两个编码单元，所以它的length=3
let a='吉a' 

//charCodeAt() 方法返回的只是位置0处的第一个编码单元
console.log(a.charCodeAt(0))  //55362
console.log(a.charCodeAt(1))  //57271 
console.log(a.charCodeAt(2))  //97 

//codePointAt() 方法返回完整的码位，即使这个码位包含多个编码单元。
console.log(a.charCodePointAt(0))  //134071 
console.log(a.charCodePointAt(1))  //57271 
console.log(a.charCodePointAt(2))  //97

对于BMP字符集中的字符，codePointAt() 与 charCodeAt() 方法的返回值相同。

对于非BMP的，两个方法返回值不同。

检测一个字符占用的编码单元数量：

function is32Bit(c){
    return c.codePointAt(0) > 0xFFFF; //上界为16进制FFFF，超过则由两个编码单元表示，共有32位
}

console.log(is32Bit("吉"));   //true
console.log(is32Bit("a"));   //false

3. String.fromCodePoint() 与 String.fromCharCode()

作用与codePointAt相反，可以根据指定的码位生成一个字符。

对于BMP中的所有字符，String.fromCodePoint() 与 String.fromCharCode() 方法执行结果相同。

对于非BMP的码位作为参数，二者执行结果有可能不同。

console.log(String.fromCodePoint(134071)); //"吉"

4. normalize()

这个方法接受一个可选的字符串，将该字符串转化为相应的标准Unicode的形式，然后可以进行字符串的比较。以确保即使两个字符串原来分别是16位字符和32位字符也照样可以比较。

其他字符串变更

1. 正则表达式u修饰符

当给正则表达式添加u字符时，它就从编码单元操作模式切换为字符模式也就是由原来匹配编码单元改为匹配字符。这样就不会视代理对为两个字符，从而完全按照预期正常运行。

1.1. 检测u修饰符支持

function hasRegExpU（）{
 try {
  var pattern=new RegExp(".","u")
  return true;
 } catch(ex){
  return false
 }
}

1.2. 字符串中的字串识别

以前我们使用 indexOf() 来检测字符串中是否包含另外一段字符串。\

let msg = 'abcdefg'
if(msg.indexOf('cde') > -1) {
   console.log(2)  //输出2，因为t字符串中包含cde字符串。
}

在ES6中，新增了3个新方法。每个方法都接收2个参数，需要检测的子字符串，以及开始匹配的索引位置。

includes() 方法。用于识别当前字符串中是否包含了某一个子串。
startsWith()方法。顾名思义，找到以某一个子串开始的字符串。
endsWith()方法。同样，从后往前查找是否包含某一个子串。

let msg = "Hello world!";

console.log(msg.startsWith("Hello")); //true
console.log(msg.endWith("!"));        //true
console.log(msg.includes("o"));       //true

console.log(msg.startsWith("o"));    //false
console.log(msg.endWith("world"));   //true
console.log(msg.includes("x"));      //false

//参数：指定要搜索的文本，指定一个开始搜索位置的索引
//includes()和startsWith()从索引位置开始匹配，endWith()从（索引值-搜索文本长度）的位置开始匹配
console.log(msg.startsWith("o",4));    //true
console.log(msg.endWith("o",8));       //true
console.log(msg.includes("o",8));      //false

1.3. repeat()

该方法接受一个number类型的参数，然后将调用该方法的字符串重复n次，返回该字符串。

console.log( "hello".repeat(2) ); // "hellohello"

其他正则表达式语法变更

1. 正则表达式 y 修饰符

该属性会通知搜索正则表达式的 lastIndex 属性开始进行，如果在指定位置没有匹配成功，则停止继续匹配。

2. 正则表达式的复制

在 ES5 环境中运行这段代码，那么你会收到一条错误信息，表示在第一个参数已经是正则表达式的情况下不能再使用第二个参数。 ES6 则修改了这个行为，允许使用第二个参数，并且让它覆盖第一个参数中的标志。

	var re1 = /ab/i, 

    // ES5 中会抛出错误, ES6 中可用 
	re2 = new RegExp(re1, "g");

	console.log(re1.toString()); // "/ab/i" 
	console.log(re2.toString()); // "/ab/g" 
	
	console.log(re1.test("ab")); // true 
	console.log(re2.test("ab")); // true 
	
	console.log(re1.test("AB")); // true 
	console.log(re2.test("AB")); // false

3. flags属性

在ES6的版本中，添加了正则表达式的 flags 属性，该属性可以返回所有应用于当前正则表达式的修饰符字符串。

模板字面量

模板字面量是 ES6 针对 JS 直到 ES5 依然完全缺失的如下功能的填补：

多行字符串：针对多行字符串的形式概念；
基本的字符串格式化：将字符串部分替换为已存在的变量值的能力；
HTML 转义：能转换字符串以便将其安全插入到 HTML 中的能力。

模板字面量的最简单语法，是使用反引号（ ` ` ）来包裹普通字符串，而不是用双引号或单引号。

利用它可以实现输出多行字符串。以前的时候，多行字符串依靠拼接，然后加上换行符。有了这个反撇号后就可以直接拼出来多行字符串，并且显示的时候也是多行的字符串。
利用它可以实现占位符功能。声明一个变量，然后可以使用 ${ } 来取出这个变量的值。

let name = "world",
message = `Hello, ${name}.`;
console.log(message);          // "Hello, world."
console.log(typeof message);   // "string"
console.log(message.length);   // 12

模板标签

它就是一个包含了反撇号表达式的函数。这个函数以反撇号表达式作为参数，然后标签名就是这个函数的函数名。文章来源地址https://www.toymoban.com/news/detail-648323.html

到了这里，关于【深入理解ES6】字符串和正则表达式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！