【深入理解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

模板标签

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/74084.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

怎么开通Tik Tok海外娱乐公会呢?

TikTok作为全球知名的社交媒体平台,吸引了数亿用户的关注和参与。许多公司和个人渴望通过开通TikTok直播公会进入这一领域,以展示自己的创造力和吸引更多粉丝。然而,成为TikTok直播公会并非易事,需要满足一定的门槛和申请找cmxyci…

YAMLException: java.nio.charset.MalformedInputException: Input length = 1

springboot项目启动的时候提示这个错误:YAMLException: java.nio.charset.MalformedInputException: Input length 1 根据异常信息提示,是YAML文件有问题。 原因是yml配置文件的编码有问题。 需要修改项目的编码格式,一般统一为UTF-8。 或…

Die2Die(D2D)和chip2chip(C2C)之间的高速互联接口

随着chiplet的兴起,Die2Die的高速互联越来越重要,相比于传统的C2C(chip2chip)的互联,D2D的片间距离很近(10mm量级),且这些小的chip(裸片)最终形成一个封装【多芯片模块(MCM)】。所以D2D的互联信道短&#x…

[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的区别 主要…

Oracle常用基础知识

整体介绍 SQL语言是一种数据库语言 1、DDL:数据定义语言 create-创建 drop-删除 alter-修改 rename-重命名 truncate-截断 2、DML:数据操作语句 insert-插入 delete-删除 update-更新 select-查询 3、DCL:数据控制语句 grant-授权 rev…

DTC服务(0x14 0x19 0x85)

DTC相关的服务有ReadDTCInformation (19) service,ControlDTCSetting (85) service和ReadDTCInformation (19) service ReadDTCInformation (19) service 该服务允许客户端从车辆内任意一台服务器或一组服务器中读取驻留在服务器中的诊断故障代码( DTC )信息的状态…

c语言——颠倒字符串顺序

//颠倒字符串顺序 //列如&#xff1a;我们将runningman利用递归翻转计算。 #include<stdio.h> void reverseSentence(); int main() {printf("字符串输入:");reverseSentence();return 0; }void reverseSentence() {char c;scanf("%c",&c);if(c!…

沁恒ch32V208处理器开发(三)GPIO控制

目录 GPIO功能概述 CH32V2x 微控制器的GPIO 口可以配置成多种输入或输出模式&#xff0c;内置可关闭的上拉或下拉电阻&#xff0c;可以配置成推挽或开漏功能。GPIO 口还可以复用成其他功能。端口的每个引脚都可以配置成以下的多种模式之一&#xff1a; 1 浮空输入 2 上拉输入…

Spring事务控制

目录 1、什么是事务控制 2、编程式事务控制 2.1、简介 2.2、相关对象 2.2.1、PlatformTransactionManager 2.2.2、TransactionDefinition 2.2.2.1、事务隔离级别 2.2.2.2、事务传播行为 2.2.3、TransactionStatus 3、声明式事务控制 3.1、简介 3.2、区别 3.3、⭐作…

做BI领域的ChatGPT,思迈特升级一站式ABI平台

8月8日&#xff0c;以「指标驱动 智能决策」为主题&#xff0c;2023 Smartbi V11系列新品发布会在广州丽思卡尔顿酒店开幕。 ​ 后疫情时代&#xff0c;BI发展趋势的观察与应对 在发布会上&#xff0c;思迈特CEO吴华夫在开场致辞中表示&#xff0c;当前大环境背景下&#xf…

Android Studio实现列表展示图片

效果&#xff1a; MainActivity 类 package com.example.tabulation;import android.content.Intent; import android.os.Bundle; import android.view.View;import androidx.appcompat.app.AppCompatActivity; import androidx.recyclerview.widget.LinearLayoutManager; im…

[高光谱]PyTorch使用CNN对高光谱图像进行分类

项目原地址&#xff1a; Hyperspectral-Classificationhttps://github.com/eecn/Hyperspectral-ClassificationDataLoader讲解&#xff1a; [高光谱]使用PyTorch的dataloader加载高光谱数据https://blog.csdn.net/weixin_37878740/article/details/130929358 一、模型加载 在…

flutter 手写日历组件

先看效果 直接上代码 calendar_popup_view.dart import package:flutter/material.dart; import package:intl/intl.dart;import custom_calendar.dart; import hotel_app_theme.dart;class CalendarPopupView extends StatefulWidget {const CalendarPopupView({required th…

Android学习之路(2) 设置视图

一、设置视图宽高 ​ 在Android开发中&#xff0c;可以使用LayoutParams类来设置视图&#xff08;View&#xff09;的宽度和高度。LayoutParams是一个用于布局的参数类&#xff0c;用于指定视图在父容器中的位置和大小。 ​ 下面是设置视图宽度和高度的示例代码&#xff1a; …

SpringBoot基于Zookeeper实现分布式锁

文章目录 问题背景前言实现搭建Zookeeper容器引入依赖ZK客户端的配置类ZK客户端的工厂类注入bean构建测试类 问题背景 研究分布式锁&#xff0c;基于ZK实现&#xff0c;需要整合到SpringBoot使用 前言 参考自SpringBoot集成Curator实现Zookeeper基本操作&#xff0c;Zookeeper入…

母牛的故事

一、题目 有一头母牛&#xff0c;它每年年初生一头小母牛。每头小母牛从第四个年头开始&#xff0c;每年年初也生一头小母牛。请编程实现在第n年的时候&#xff0c;共有多少头母牛&#xff1f; Input 输入数据由多个测试实例组成&#xff0c;每个测试实例占一行&#xff0c;包…

CRC 校验码

CRC 校验码 题目解答发送端如何计算商 接收端 题目 假设生成多项式为 G(X)X4X31&#xff0c;要求出二进制序列10110011的CRC校验码 解答 发送端 首先 生成多项式为&#xff1a;G(X)X4X31&#xff0c;改写为二进制比特串为11001(有X的几次方&#xff0c;对应的2的几次方的位…

Android复习(Android基础-四大组件)——Broadcast

1. 广播分类 广播的发送方式&#xff1a;标准广播、有序广播、粘性广播广播的类型&#xff1a;系统广播、本地广播 1.1 标准广播 完全异步&#xff0c;无序的广播发出后&#xff0c;所有的广播接收器几乎都会在同一时间收到消息。&#xff08;异步&#xff09;但是消息无法截…

Mr. Cappuccino的第59杯咖啡——简单手写SpringIOC框架

简单手写SpringIOC框架 环境搭建基于XML方式项目结构项目代码运行结果 基于注解方式项目结构项目代码运行结果 简单手写SpringIOC框架核心原理基于XML方式原理项目结构项目代码运行结果 基于注解方式原理项目结构项目代码运行结果 环境搭建 基于XML方式 项目结构 项目代码 p…

【量化课程】08_1.机器学习量化策略基础实战

文章目录 1. 常用机器学习模型1.1 回归模型1.2 分类模型1.2.1 SVC介绍1.2.2 SVC在量化策略中的应用 2. 机器学习量化策略实现的基本步骤3. 策略实现 1. 常用机器学习模型 1.1 回归模型 线性回归多层感知器回归自适应提升树回归随机森林回归 1.2 分类模型 线性分类支持向量机…