【深入理解ES6】字符串和正则表达式

news/2024/7/10 23:52:43 标签: es6, 正则表达式, 前端

概念

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

更好的Unicode支持

1. UTF-16码位

字符串里的字符有两种:

  • 前 2^{16} 个码位均以16位的编码单元表示的BMP字符(基本多文种平面。
  • 超过 2^{16} 的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

模板标签

它就是一个包含了反撇号表达式的函数。这个函数以反撇号表达式作为参数,然后标签名就是这个函数的函数名。


http://www.niftyadmin.cn/n/4938674.html

相关文章

Introduction to PWA ( progressive web app ) -- PWA

Reference What is a progressive web app? - Progressive web apps | MDN (mozilla.org)

k8s 自身原理 5

我们知道容器是通过 pod 来承载的,我们在 k8s 中,服务都是跑在 pod 里面的,pod 里面可以跑 1 个容器,或者跑多个容器,那么咱们 pod 里面跑 1 个服务容器,咱真的就以为里面就只有这样个容器吗? …

TiDB Bot:用 Generative AI 构建企业专属的用户助手机器人

本文介绍了 PingCAP 是如何用 Generative AI 构建一个使用企业专属知识库的用户助手机器人。除了使用业界常用的基于知识库的回答方法外,还尝试使用模型在 few shot 方法下判断毒性。 最终,该机器人在用户使用后,点踩的比例低于 5%&#xff0…

[C++ 网络协议编程] UDP协议

目录 1. UDP和TCP的区别 2. UDP的工作原理 3. UDP存在数据边界 4. UDP的I/O函数 4.1 sendto函数 4.2 recvfrom函数 4. 已连接(connected)UDP套接字和未连接(unconnected)UDP套接字 5. UDP的通信流程 5.1 服务器端通信流程 5.2 客户端通信流程 1. UDP和TCP的区别 主要…

案例研究|大福中国通过JumpServer满足等保合规和资产管理双重需求

“大福中国为了满足安全合规要求引入堡垒机产品,在对比了传统型堡垒机后,发现JumpServer使用部署更加灵活,功能特性丰富,能够较好地满足公司在等保合规和资产管理方面的双重需求。” ——大福(中国)有限公…

好用的安卓手机投屏到mac分享

工具推荐:scrcpy github地址:https://github.com/Genymobile/scrcpy/tree/master mac使用方式 安装环境,打开terminal,执行以下命令,没有brew的先安装brew brew install scrcpy brew install android-platform-too…

ComponentOne Studio ASP.NET MVC Crack

ComponentOne Studio ASP.NET MVC Crack FlexReport增强功能 添加了对在Microsoft Windows上部署Microsoft Azure的支持。 添加了对显示嵌入字体的支持。 .NET标准版的经典C1PDF(Beta版) GrapeCity的经典C1Pdf库现在提供了基于Microsoft.NET标准的版本。在任何.NET应用程序(包括…

Leaflet入门,Leaflet如何实现vue双向绑定数据添加到图片标记物到地图上,动态根据vue数据更新到地图上以及鼠标经过标记物显示提示框

前言 本章使用Leaflet的vue2-leaflet或者vue-leaflet插件方式实现vue数据绑定地图数据,实现地图标记物与vue数据的双向联动更新,以及鼠标经过标记物显示提示框功能。 实现效果演示 vue如何使用Leaflet vue2如何使用:《Leaflet入门,如何使用vue2-leaflet实现vue2双向绑定…