【深入理解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"));       //trueconsole.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.hqwc.cn/news/67041.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

工程监测振弦采集仪采集到的数据如何进行分析和处理

工程监测振弦采集仪采集到的数据如何进行分析和处理 振弦采集仪是一个用于测量和记录物体振动的设备。它通过测量物体表面的振动来提取振动信号数据,然后将其转换为数字信号,以便进行分析和处理。在实际应用中,振弦采集仪是广泛应用于机械、建…

pytest数据驱动(最简单)

目录 第一种:通过yaml文件获取数据(一维列表) 第二种:通过yaml文件获取数据(二维列表) 第三种:通过yaml文件获取数据(pytest.fixture) 资料获取方法 第一种&#xff…

SQL进阶--SQL的常用技巧

一、ORDER BY FIELD() 自定义排序逻辑 排序 ORDER BY 除了可以用 ASC 和 DESC,还可以通过**ORDER BY FIELD(str,str1,...)**自定义字符串/数字来实现排序。这里用 order_diy 表举例,结构以及表数据展示: 二、CASE 表达式 「case when then el…

第4章:决策树

停止 当前分支样本均为同一类时,变成该类的叶子节点。当前分支类型不同,但是已经没有可以用来分裂的属性时,变成类别样本更多的那个类别的叶子节点。当前分支为空时,变成父节点类别最多的类的叶子节点。 ID3 C4.5 Cart 过拟合 缺…

Ubantu安装Docker(完整详细)

先在官网上查看对应的版本:官网 然后根据官方文档一步一步跟着操作即可 必要准备 要成功安装Docker Desktop,必须: 满足系统要求 拥有64位版本的Ubuntu Jammy Jellyfish 22.04(LTS)或Ubuntu Impish Indri 21.10。 Docker Deskto…

Datawhale Django入门组队学习Task01

Task01 一.创建虚拟环境 python -m venv django_learn (django_learn那里是自己定的环境名字) 之前一直用conda管理虚拟环境,没咋用过virtualenv,然后我的powershell之前也设置了默认启动了base环境,然后输入activat…

深入探析设计模式:工厂模式的三种姿态

深入探析设计模式:工厂模式的三种姿态 1. 简单工厂模式1.1 概念1.2 案例1.3 优缺点 2. 抽象工厂模式2.1 概念2.2 案例:跨品牌手机生产2.3 优缺点 3. 超级工厂模式3.1 概念3.2 案例:动物园游览3.3 优缺点 4. 总结 欢迎阅读本文,今天…

Mac RN环境搭建

RN ios android原生环境搭建有时候是真恶心,电脑环境不一样配置也有差异。 我已经安装官网的文档配置了ios环境 执行 npx react-nativelatest init AwesomeProject 报错 然后自己百度查呀执行 gem update --system 说是没有权限,执行失败。因为Mac…

Android系统-进程-Binder1-概述

目录 引言: 一次拷贝 Binder一次通信过程 应用启动中的binder交互 C/S模式: Binder COMMAND BWR数据结构: 引言: Android的binder是从openbinder发展过来的。包括了binder驱动,Native层,Java层。用…

TCGA数据下载推荐:R语言easyTCGA包

#使用easyTCGA获取数据 #清空 rm(listls()) gc() # 安装bioconductor上面的R包 options(BioC_mirror"https://mirrors.tuna.tsinghua.edu.cn/bioconductor") if(!require("BiocManager")) install.packages("BiocManager") if(!require("TC…

2023年京东宠物食品行业数据分析(京东大数据)

宠物食品市场需求主要来自于养宠规模,近年来由于我国宠物数量及养宠人群的规模均在不断扩大,宠物相关产业和市场规模也在蓬勃发展,宠物食品市场也同样保持正向增长。 根据鲸参谋电商数据分析平台的相关数据显示,2023年1月-7月&am…

JS逆向系列之猿人学爬虫第11题 - app抓取 - so文件协议破解

题目地址 http://match.yuanrenxue.com/match/11这是个app题目,先下载下来安装到测试手机上 安装完成后的app界面长这样 打开之后是这样的: 要求已经简单明了了。 二话不说先反编译app 不出意外的是没出意外,源代码里面没啥混淆,所有东西都展示的明明白白的。 "…