深入理解ES6笔记（二）字符串和正则表达

TANKING 发布于2019-08-26 12:11 / 3046人阅读

摘要：主要知识点新增的字符串处理方法模板字面量以及正则表达式上的改动深入理解笔记目录字符串字符串是大原始数据类型。如果在字符串的结束部分检测到指定文本，返回，否则返回。字符串内插入反撇号的方式。

主要知识点：新增的字符串处理方法、模板字面量以及正则表达式上的改动

《深入理解ES6》笔记目录

字符串

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

字符串类型在前端开发者，是使用最频繁的类型之一，网站上可见的各种文案，几乎都是字符串类型的数据。我们经常需要使用的操作无非是这么几点：读取字符串、转换字符串、清空字符串、拼接字符串、截取字符串。

在ES5中，字符串类型已经有了非常丰富的应用能力，那么，在ES6中，ECMA的专家们对字符串做了什么更新呢？

当Unicode引入扩展字符集之后，16位的字符已经不足以满足字符串的发展，所以才在ES6中更新了Unicode的支持。

我们看看ES6字符串新增的方法

UTF-16码位：ES6强制使用UTF-16字符串编码。关于UTF-16的解释请自行百度了解。

codePointAt()：该方法支持UTF-16，接受编码单元的位置而非字符串位置作为参数，返回与字符串中给定位置对应的码位，即一个整数值。

String.fromCodePoiont()：作用与codePointAt相反，检索字符串中某个字符的码位，也可以根据指定的码位生成一个字符。

normalize()：提供Unicode的标准形式，接受一个可选的字符串参数，指明应用某种Unicode标准形式。

正则表达式

正则表达式u修饰符：当给正则表达式添加u字符时，它就从编码单元操作模式切换为字符模式。

正则表达的y标志:y 标志影响正则表达式搜索时的粘连（ sticky ）属性，它表示从正则表达式的 lastIndex 属性值的位置开始检索字符串中的匹配字符。如果在该位置没有匹配成功，那么正则表达式将停止检索；

复制正则表达式：使用RegExp构造器时允许使用第二个参数，并且让它覆盖第一个参数中的标志；
flag属性：ES6 新增了 flags 属性用于配合 source 属性，让标志的获取变得更容易。

其他新增的方法 字符串中的子串识别：

以前我们经常使用indexOf()来检测字符串中是否包含另外一段字符串。请输入代码

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

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

includes(str, index)：如果在字符串中检测到指定文本，返回true，否则false；如果不传第二个参数，默认为0。

let t = "abcdefg"
if(t.includes("cde")) {
  console.log(2)
}
//true

startsWith(str, index)：如果在字符串起始部分检测到指定文本，返回true，否则返回false。如果不传第二个参数，默认为0。

let t = "abcdefg"
if(t.startsWith("ab")) {
  console.log(2)
}
//true

endsWith(str, index)：如果在字符串的结束部分检测到指定文本，返回true，否则返回false。默认为字符串末尾开始查找。

如果你只是需要匹配字符串中是否包含某子字符串，那么推荐使用新增的方法，如果需要找到匹配字符串的位置，使用indexOf()。

repeat(number)

接收一个Number类型的数据，返回一个重复N次的新字符串。即使这个字符串是空字符，也你能返回N个空字符的新字符串。

console.log("ba".repeat(3)) //bababa

模板字面量 基础语法

以前，我们用单引号或双引号表示字符串。

let a = "123" //单引号
let b = "123" //双引号

现在，使用模板字面量反撇号``。在实际开发中，这是经常都要用到的方法。

let c = `123` //反撇号

在字符串中使用反撇号，只需要加上转义符。

let d = `12`3` //字符串内插入反撇号的方式。

多行字符串

模板字面量为解决多行字符串的一系列问题提供了一个非常好的机制。

如果不使用模板字面量，实现多行字符串，你可能会使用换行符。

let a = "123
456"
console.log(a) 
// 123
// 456

使用模板字面量，就可以非常简单的实现需求。

let a = `123
456
`
console.log(a)
// 123
// 456

在模板字面量插入变量的方法（字符串占位符）

我们不再需要使用 +（加号）来向字符串插入变量，而是使用${params}直接插入你需要添加到字符串的位置。

let t = "haha"
let a = `123${t}456`
console.log(a) //123haha456

既然替换位是 JS 表达式，那么可替换的就不仅仅是简单的变量名。你可以轻易嵌入计算、函
数调用，等等。例如：

let count = 10,
price = 0.25,
message = `${count} items cost $${(count * price).toFixed(2)}.`;
console.log(message); // "10 items cost $2.50."

服务器托管混合云字符串正则表达式深入理解系列深入理解linux 深入理解webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108186.html

《深入理解ES6》笔记——字符串和正则表达式（2）

摘要：本章主要讲个知识点，字符串正则表达式字符串字符串是大原始数据类型。提供的标准形式，接受一个可选的字符串参数，指明应用某种标准形式。如果在字符串中检测到指定文本，返回，否则。字符串内插入反撇号的方式。相比较于第一章变量的声明，这一章的内容有了一点深度提升，但还不至于很难理解。本章主要讲2个知识点，字符串、正则表达式字符串字符串（String）是JavaScript6大原始数据类型。...

guqiu 2019-08-20 18:02 评论0 收藏0
《深入理解ES6》笔记——字符串和正则表达式（2）

摘要：本章主要讲个知识点，字符串正则表达式字符串字符串是大原始数据类型。提供的标准形式，接受一个可选的字符串参数，指明应用某种标准形式。如果在字符串中检测到指定文本，返回，否则。字符串内插入反撇号的方式。相比较于第一章变量的声明，这一章的内容有了一点深度提升，但还不至于很难理解。本章主要讲2个知识点，字符串、正则表达式字符串字符串（String）是JavaScript6大原始数据类型。...

loostudy 2019-08-05 11:37 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

jsbintask 2019-08-21 12:05 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

?xiaoxiao, 2019-08-05 12:00 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

muddyway 2019-08-29 13:21 评论0 收藏0