前言

本章主要是内容为是 ES6 对字符串的改造和增强。

本章记录字符串的扩展常用重点部分,不常用知识稍作记录。

本章原文链接: 字符串的扩展

模板字符串(template string)

ES6字符串的扩展最常用的就是模版字符串了

模板字符串,都是用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。

  • 模版字符串 保留空格和换行。
  • 模版字符串 是允许嵌入变量名或表达式。
  • 模版字符串 可以嵌套模版字符串。
  • 模版字符串 "标签模板"功能

模版字符串保留空格和换行,直接在模版字符串中使用换行与空格就行

//  模版字符串保留空格和换行
const SAMPLE =
` <ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
</ul>`;
console.log(SAMPLE);
// 输出结果为
/*
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
</ul>
*/

模版字符串使用变量与字符串需要写在${} 的大括号中,在大括号中也可以写字符串。

// 在模版字符串中使用变量与表达式
let sampleName = "gssg";
let sampleAge = 10;
let sampleAge1 = 8; const SAMPLE = `My name is ${sampleName} and MY age is ${sampleAge + sampleAge1} years old`;
console.log(SAMPLE);
// 输出 My name is gssg and MY age is 18 years old

在模版字符串中还可以写模版字符串,利用${}来嵌套。

// 模版字符串的嵌套

const SAMPLE = `
<ul>
${`<li>list1</li>
<li>list2</li>`}
</ul>
`;
console.log(SAMPLE);
// 输出
/*
<li>list1</li>
<li>list2</li>
</ul>
*/

模版字符串可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能(tagged template)。

标签模板其实不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。

alert`hello`;
// 等同于
alert(['hello']); // 模板字符串前面有一个标识名tag,它是一个函数。整个表达式的返回值,就是tag函数处理模板字符串后的返回值。 let sample = 5;
let sample1 = 10; tag`Hello ${sample} world ${sample + sample1}`;
// 等同于
tag(['Hello ', ' world ', ''], 5, 15);

Unicode

Unicode的目标是为世界上每一个字符提供唯一标识符,唯一标识符称为码位或码点(code point)。而这些码位是用于表示字符的,又称为字符编码(character encode)

ES6 加强了对 Unicode 的支持,允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点。

console.log("\u0062"); // b

// 也可以使用大括号将原来超过 0xFFFF 的数值,正确解读
console.log("\u{20FFF}"); //

字符串的遍历器接口

ES6 为字符串添加了遍历器接口(这部分内容在后面),使得字符串可以被for...of循环遍历。

for (let item of 'sample') {
console.log(item);
}
// 逐个输出
/*
l
p
m
a
s
e
*/

这个遍历器最大的优点是可以识别大于0xFFFF的码点,传统的for循环无法识别这样的码点。

let sample = "\u{20FFF}";

for (let item of sample) {
console.log(item);
}
// 输出

JSON.stringify() 的改造

根据标准,JSON 数据必须是 UTF-8 编码。但是,现在的JSON.stringify()方法有可能返回不符合 UTF-8 标准的字符串。

ES2019 改变了JSON.stringify()的行为。如果遇到0xD8000xDFFF之间的单个码点,或者不存在的配对形式,它会返回转义字符串,留给应用自己决定下一步的处理。

let sample = JSON.stringify('\u{D834}');
let sample1 = JSON.stringify('\uDF06\uD834');
console.log(sample, sample1); // "\ud834" "\udf06\ud834"

ES6学习 第三章 字符串的扩展的更多相关文章

  1. ES6学习 第五章 正则的扩展

    前言 本章介绍正则的扩展.有些不常用的知识了解即可. 本章原文链接:正则的扩展 RegExp 构造函数 从 ES6 开始,如果RegExp构造函数第一个参数是一个正则对象,并且第二个标志存在且为标志参 ...

  2. ES6学习笔记<三> 生成器函数与yield

    为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...

  3. python3.4学习笔记(三) idle 清屏扩展插件

    python3.4学习笔记(三) idle 清屏扩展插件python idle 清屏问题的解决,使用python idle都会遇到一个常见而又懊恼的问题——要怎么清屏?在stackoverflow看到 ...

  4. Python第三章-字符串

    第三章  字符串 3.1 基本字符串操作 Python的字符串和元组差不多,是不可以进行改变的,如果想改变值,可以尝试list序列化之后在进行修改. {    website = 'http://ww ...

  5. Java基础知识二次学习--第三章 面向对象

    第三章 面向对象   时间:2017年4月24日17:51:37~2017年4月25日13:52:34 章节:03章_01节 03章_02节 视频长度:30:11 + 21:44 内容:面向对象设计思 ...

  6. Struts2框架学习第三章——Struts2基础

    本章要点 —  Struts 1框架的基本知识 — 使用Struts 1框架开发Web应用 —  WebWork框架的基本知识 — 使用WebWork框架开发Web应用 — 在Eclipse中整合To ...

  7. C#高级编程 (第六版) 学习 第三章:对象和类型

    第三章 对象和类型 1,类和结构 类存储在托管堆上 结构存储在堆栈上   2,类成员 类中的数据和函数称为类成员 数据成员 数据成员包括了字段.常量和事件   函数成员 方法:与某个类相关的函数,可以 ...

  8. <<C++ Primer>> 第三章 字符串, 向量和数组 术语表

    术语表 第 3 章 字符串, 向量和数组 begin: 是 string 和 vector 的成员,返回指向第一个元素的迭代器.也是一个标准库函数,输入一个数字,返回指向该数字首元素的指针.    缓 ...

  9. python--基础学习(三)字符串单引号、双引号、三引号

    1.基本认识 单引号字符串:'python' 双引号字符串:"python" 三引号字符串:'''python'''(三单引号),"""python& ...

  10. ES6学习笔记(三)字符串的扩展

    ES6 加强了对 Unicode 的支持,并且扩展了字符串对象. 1.字符的Unicode表示法 JavaScript 允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码 ...

随机推荐

  1. spring boot 集成配置阿里 Druid监控配置

    本文为博主原创,转载请注明出处: github 地址如下:https://github.com/alibaba/druid/wiki 其相关问题也可参考:https://github.com/alib ...

  2. springBoot 整合 hikari

    Hikari是一款非常强大,高效,并且号称"史上最快连接池".并且在springboot2.0之后,采用的默认数据库连接池就是Hikari.不需要引入依赖,已经在SpringBoo ...

  3. Python定位错误:段错误 (核心已转储)

    技术背景 在各种编程语言中都有可能会遇到这样一个报错:"段错误 (核心已转储)".显然是编写代码的过程中有哪里出现了问题,但是这个报错除了这几个字以外没有任何的信息,我们甚至不知道 ...

  4. MAUI使用Masa blazor组件库

    上一篇(点击阅读)我们实现了UI在Web端(Blazor Server/Wasm)和客户端(Windows/macOS/Android/iOS)共享,这篇我加上 Masa Blazor组件库的引用,并 ...

  5. 07-verilog & sytem verilog

    一.数据类型 二值逻辑变量 bit 不赋值的时候,变量初始默认为0 x或z的值会转变为0 bit vector--bit矢量 bit [msb,lsb] variable_name = [initia ...

  6. MyBatis05——一对多和多对一处理

    多对一处理 1.数据库表的设计 CREATE TABLE `teacher` ( `id` INT(10) NOT NULL, `name` VARCHAR(30) DEFAULT NULL, PRI ...

  7. [转帖]使用 Grafana 监控 TiDB 的最佳实践

    https://docs.pingcap.com/zh/tidb/stable/grafana-monitor-best-practices 使用 TiUP 部署 TiDB 集群时,如果在拓扑配置中添 ...

  8. [转帖]ls 只显示目录

    https://www.cnblogs.com/lavin/p/5912369.html 只显示目录: ls -d */ 在实际应用中,我们有时需要仅列出目录,下面是 4 种不同的方法. 1. 利用 ...

  9. [转帖]《Linux性能优化实战》笔记(20)—— 使用 tcpdump 和 Wireshark 分析网络流量

    tcpdump 和 Wireshark 是最常用的网络抓包和分析工具,更是分析网络性能必不可少的利器. tcpdump 仅支持命令行格式使用,常用在服务器中抓取和分析网络包.Wireshark 除了可 ...

  10. [转帖]使用SkyWalking监控nginx (以openresty为例)

    https://www.cnblogs.com/hahaha111122222/p/15829737.html 安装使用SkyWalking先看这篇文章,地址:https://www.cnblogs. ...