【深入理解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.mzph.cn/news/42806.shtml

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

相关文章

总结,由于顺丰的问题,产生了电脑近期一个月死机问题集锦

由于我搬家,我妈搞顺丰发回家,但是没有检查有没有坏,并且我自己由于不可抗力因素,超过了索赔时间,反馈给顺丰客服,说超过了造成了无法索赔的情况,现在总结发生了损坏配件有几件,显卡…

文心一言最新重磅发布!

8月16日,由深度学习技术及应用国家工程研究中心主办的WAVE SUMMIT深度学习开发者大会2023举办。百度首席技术官、深度学习技术及应用国家工程研究中心主任王海峰以《大语言模型为通用人工智能带来曙光》为题,阐述了大语言模型具备理解、生成、逻辑、记忆…

【云原生】k8s存储管理中ConfigMap Secret的使用

目录 1 ConfigMap 1.1 简介 1.2 优点 1.3 定义 ConfigMap 1.4 使用 2 Secret 2.1 简介 2.1 定义 Secret 2.2 使用 1 ConfigMap 1.1 简介 在 Kubernetes 中,ConfigMap 是一种用于存储非敏感信息的 Kubernetes 对象。它用于存储配置数据,如键值…

Vue 2 动态组件和异步组件

先阅读 【Vue 2 组件基础】中的初步了解动态组件。 动态组件与keep-alive 我们知道动态组件使用is属性和component标签结合来切换不同组件。 下面给出一个示例&#xff1a; <!DOCTYPE html> <html><head><title>Vue 动态组件</title><scri…

Typora 相对路径保存图片以及 Gitee 无法显示图片

目录 Typora 相对路径保存图片 Gitee 无法显示图片 Typora 相对路径保存图片 Step1&#xff1a;修改 Typora 的偏好设置 自动在当前目录创建名为 "./${filename}.assets" 的文件夹粘贴图片到 md 中时&#xff0c;图片会自动另存到 "./${filename}.assets&qu…

LVGL基本控件介绍

1. 弧(lv_arc) 特点 弧的0度在右边&#xff0c;90度在下边 效果图 源码 void lv_arc_demo(void) {/* Create an Arc */lv_obj_t* arc lv_arc_create(lv_scr_act(), NULL);/* Set Background range */lv_arc_set_bg_angles(arc, 0, 360);/* Set Forward range */lv_arc_set…

第十课:Qt 字符编码和中文乱码相关问题

功能描述&#xff1a;最全的 Qt 字符编码相关知识以及中文乱码的原因与解决办法 一、字符编码种类 ASCII 码 美国人对信息交流的编码&#xff0c;包括 26 个字母&#xff08;大小写&#xff09;、数字和标点符号等&#xff0c;用一个字节&#xff08;8 位&#xff09;表示这些…

eNSP:VLAN-hybrid实验应用

实验要求&#xff1a; 拓扑图 配置 sw1: [sw1]vlan batch 2 to 6[sw1]int Ethernet 0/0/2 [sw1-Ethernet0/0/2]port link-type access [sw1-Ethernet0/0/2]port default vlan 2 [sw1-Ethernet0/0/2]int e 0/0/4 [sw1-Ethernet0/0/4]port link-ty access [sw1-Ethernet0/0/…

springBoot 配置文件 spring.mvc.throw-exception-if-no-handler-found 参数的作用

在Spring Boot应用中&#xff0c;可以通过配置文件来控制当找不到请求处理器&#xff08;handler&#xff09;时是否抛出异常。具体的配置参数是spring.mvc.throw-exception-if-no-handler-found。 默认情况下&#xff0c;该参数的值为false&#xff0c;即当找不到请求处理器时…

《Zookeeper》源码分析(十四)之 投票是如何发送与接收的

目录 MessengerWorkerSenderWorkerReceiver第5步&#xff1a;检验选票的epoch和version第6步&#xff1a;处理投票 Messenger Messenger管理接收到的消息以及待发送的消息&#xff0c;其源码如下&#xff1a; 它的源码比较简单&#xff0c;接下来着重介绍它维护的两个线程&a…

Docker 网络之 ipvlan 和 macvlan

Docker ipvlan 和 macvlan 引言 本文讲解了Docker 网络模式中的 ipvlan 和 macvlan 的区别,目前自己在生产环境中使用的 ipvlan 模式非常问题.也解决了实际业务问题. IPvlan L2 mode example ipvlan 无需网卡混杂模式 , 运行如下命令后可以生成一个 vlan 子接口 , 会和主网卡…

ElasticSearch的客户端操作

ElasticSearch的客户端操作 1、客户端介绍 官方文档地址&#xff1a; https://www.elastic.co/guide/en/elasticsearch/reference/current/index.html 实际开发中&#xff0c;有多种方式操作Elasticsearch&#xff1a; 客户端工具&#xff1a;发送http请求(RESTful风格)操作…

Azure Blob存储使用

创建存储账户,性能选择标准即可&#xff0c;冗余选择本地冗余存储即可 容器选择类别选择专用即可 可以上传文件到blob中 打开文件可以看到文件的访问路径 4.编辑中可以修改文件 复制链接&#xff0c;尝试访问&#xff0c;可以看到没有办法访问&#xff0c;因为创建容器的时候选…

spring(15) SpringBoot启动过程

目录 一、过程简介二、过程流程图三、源码分析1、运行 SpringApplication.run() 方法2、确定应用程序类型3、加载所有的初始化器4、加载所有的监听器5、设置程序运行的主类6、开启计时器7、将 java.awt.headless 设置为 true8、获取并启用监听器9、设置应用程序参数10、准备环境…

LeetCode450. 删除二叉搜索树中的节点

450. 删除二叉搜索树中的节点 文章目录 [450. 删除二叉搜索树中的节点](https://leetcode.cn/problems/delete-node-in-a-bst/)一、题目二、题解方法一&#xff1a;递归&#xff08;一种麻烦的方法&#xff09;方法二&#xff1a;优化后的递归 一、题目 给定一个二叉搜索树的根…

论文阅读——Imperceptible Adversarial Attack via Invertible Neural Networks

Imperceptible Adversarial Attack via Invertible Neural Networks 作者&#xff1a;Zihan Chen, Ziyue Wang, Junjie Huang*, Wentao Zhao, Xiao Liu, Dejian Guan 解决的问题&#xff1a;虽然视觉不可感知性是对抗性示例的理想特性&#xff0c;但传统的对抗性攻击仍然会产…

每天一道leetcode:1129. 颜色交替的最短路径(图论中等广度优先遍历)

今日份题目&#xff1a; 给定一个整数 n&#xff0c;即有向图中的节点数&#xff0c;其中节点标记为 0 到 n - 1。图中的每条边为红色或者蓝色&#xff0c;并且可能存在自环或平行边。 给定两个数组 redEdges 和 blueEdges&#xff0c;其中&#xff1a; redEdges[i] [ai, bi…

Dubbo Spring Boot Starter 开发微服务应用

环境要求 系统&#xff1a;Windows、Linux、MacOS JDK 8 及以上&#xff08;推荐使用 JDK17&#xff09; Git IntelliJ IDEA&#xff08;可选&#xff09; Docker &#xff08;可选&#xff09; 项目介绍 在本任务中&#xff0c;将分为 3 个子模块进行独立开发&#xff…

计算机组成与设计 Patterson Hennessy 笔记(一)MIPS 指令集

计算机的语言&#xff1a;汇编指令集 也就是指令集。本书主要介绍 MIPS 指令集。 汇编指令 算数运算&#xff1a; add a,b,c # abc sub a,b,c # ab-cMIPS 汇编的注释是 # 号。 由于MIPS中寄存器大小32位&#xff0c;是基本访问单位&#xff0c;因此也被称为一个字 word。M…

webpack中常见的Loader

目录 1.webpack中的loader是什么&#xff1f;配置方式 2. loader特性3.常见的loader 1.webpack中的loader是什么&#xff1f; loader 用于对模块的"源代码"进行转换&#xff0c;在 import 或"加载"模块时预处理文件 webpack做的事情&#xff0c;仅仅是分…