ES6之字符串的扩展

  • 字符串的扩展
    • 关键的扩展点及其示例:
      • Unicode 表示与处理
        • JavaScript 共有6种方法可以表示一个字符。
        • codePointAtpos:
        • String.fromCodePoint…codePoints:
      • **字符串的遍历 for … of **
      • 字符串方法的增强
        • includessearchString[, position]:
        • startsWithsearchString[, position]:
        • endsWithsearchString[, length]:
        • 第二个参数
      • 字符串的重复
        • repeatcount:
      • 字符串的补全
        • padStarttargetLength[, padString] 和 padEndtargetLength[, padString]:
      • 模板字符串(Template Literals)
        • 过滤 HTML 字符串,防止用户输入恶意内容
        • 多语言转换(国际化处理)

1. 字符串的扩展

ES6 加强了对 Unicode 的支持,并且扩展了字符串对象。

ES6(ECMAScript 2015)对字符串类型进行了显著的扩展,引入了许多新的方法和特性,提高了处理字符串的便利性和效率。

1.1. 关键的扩展点及其示例:

1.1.1. Unicode 表示与处理

ES5中,这种表示法只限于码点在 \u0000 ~ \uFFFF 之间的字符。超出这个范围的字符,必须用两个双字节的形式表示。

"\uD842\uDFB7"
// ""
"\u20BB7"
// " 7"

上面代码表示,如果直接在 \u 后面跟上超过 0xFFFF 的数值(比如\u20BB7 ),JavaScript会理解成 \u20BB+7 。由于 \u20BB 是一个不可打印字符,所以只会显示一个空格,后面跟着一个 7 。

ES6 对这一点做出了改进,只要将码点放入大括号,就能正确解读该字符。

"\u{20BB7}"
// """\u{41}\u{42}\u{43}"
// "ABC"let hello = 123;
hell\u{6F} // 123'\u{1F680}' === '\uD83D\uDE80'
// true

上面代码中,最后一个例子表明,大括号表示法与四字节的 UTF-16 编
码是等价的。

1.1.1.1. JavaScript 共有6种方法可以表示一个字符。
'\z' === 'z' // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true
1.1.1.2. codePointAt(pos)

返回字符串中指定位置的 Unicode 码点。

let str = "𠮷";
console.log(str.codePointAt(0)); // 正确输出大于0xFFFF的码点
1.1.1.3. String.fromCodePoint(...codePoints)

从一系列 Unicode 码点创建字符串。

console.log(String.fromCodePoint(0x20BB7)); // 输出: "𠮷"
1.1.2. **字符串的遍历 for … of **

引入了迭代器接口,可以直接用for…of循环遍历字符串中的每个字符(包括 surrogate pairs)。

let str = "hello";
for (let char of str) {console.log(char);
}
1.1.3. 字符串方法的增强
1.1.3.1. includes(searchString[, position])

判断字符串是否包含某个子串,返回布尔值。

let str = "Hello world";
console.log(str.includes("world")); // 输出: true
1.1.3.2. startsWith(searchString[, position])

判断字符串是否以指定的子串开始,返回布尔值。

console.log(str.startsWith("Hello")); // 输出: true
1.1.3.3. endsWith(searchString[, length])

判断字符串是否以指定的子串结束,返回布尔值。

console.log(str.endsWith("world")); // 输出: true
1.1.3.4. 第二个参数

这三个方法都支持第二个参数,表示开始搜索的位置。

let s = 'Hello world!';s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

上面代码表示,使用第二个参数 n 时, endsWith 的行为与其他两个方法有所不同。它针对前 n 个字符,而其他两个方法针对从第 n 个位置直到字符串结束。

1.1.4. 字符串的重复
1.1.4.1. repeat(count)

返回一个新的字符串,将原字符串重复指定次数。

let str = "abc";
console.log(str.repeat(3)); // 输出: "abcabcabc"
1.1.5. 字符串的补全
1.1.5.1. padStart(targetLength[, padString])padEnd(targetLength[, padString])

在字符串的开头或结尾补全指定的字符,直到达到指定长度。

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。 padStart() 用于头部补全, padEnd() 用于尾部补全。

padStart 和 padEnd 一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。

console.log("foo".padStart(5, '0')); // 输出: "00foo"
console.log("foo".padEnd(5, '0')); // 输出: "foo00"
1.1.6. 模板字符串(Template Literals)

使用反引号(`)定义,允许直接嵌入变量和表达式,以及多行字符串。

let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting); // 输出: Hello, Alice!
1.1.6.1. 过滤 HTML 字符串,防止用户输入恶意内容
let message =
SaferHTML`<p>${sender} has sent you a message.</p>`;
function SaferHTML(templateData) {let s = templateData[0];for (let i = 1; i < arguments.length; i++) {let arg = String(arguments[i]);// Escape special characters in the substitution.s += arg.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");// Don't escape special characters in the template.s += templateData[i];}return s;
}

上面代码中, sender 变量往往是用户提供的,经过 SaferHTML 函数处理,里面的特殊字符都会被转义。

let sender = '<script>alert("abc")</script>'; // 恶意代码
let message = SaferHTML`<p>${sender} has sent you a message.</p>`;message
// <p>&lt;script&gt;alert("abc")&lt;/script&gt; has sent
you a message.</p>
1.1.6.2. 多语言转换(国际化处理)
i18n`Welcome to ${siteName}, you are visitor number
${visitorNumber}!`
// "欢迎访问xxx,您是第xxxx位访问者!"

模板字符串本身并不能取代Mustache之类的模板库,因为没有条件判断和循环处理功能.

这些扩展极大地丰富了JavaScript处理字符串的能力,使得字符串操作更加灵活和强大。

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

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

相关文章

记录:robot_localization传感器数据融合学习

一、参考资料 官方&#xff1a; http://wiki.ros.org/robot_localizationhttp://docs.ros.org/en/noetic/api/robot_localization/html/index.html2015 ROSCon 演讲官方网址&#xff08;youyube上也有这个视频&#xff09; 实践教程 https://kapernikov.com/the-ros-robot_…

纯福利|手把手教你如何白嫖免费的GPU资源(二)

大家好&#xff0c;我是无界生长。 前段时间写过一篇文章《纯福利&#xff5c;手把手教你如何白嫖免费的GPU资源&#xff08;一&#xff09;》&#xff0c;使用Google Colab提供的免费的GPU资源&#xff0c;今天接着写白嫖GPU资源攻略&#xff0c;可获得“长期免费的CPU实例资源…

【opencv】信用卡号识别实验

实验环境&#xff1a;anaconda、jupyter notebook&#xff08;其它的ide也行&#xff09; 实验用的包&#xff1a;numpy、matplotlib、opencv 实验目标&#xff1a; 识别信用卡的卡号 信用卡图片&#xff1a; 数字模板图片&#xff1a; 一、包引入 import cv2 import matplo…

kubernetes集群svc的代理模式-iptables修改为ipvs

一、概述\ 我们都知道&#xff0c;k8s集群的外部网络分发&#xff0c;借助kube-proxy组件来完成&#xff1b; 问题&#xff1a;我们为什么要将代理模式修改为ipvs而不继续使用iptables呐&#xff1f; 1&#xff0c;iptables底层使用四表五链完成网络代理&#xff0c;效率比较低…

RiProV2主题美化【支付页弹窗增加价格提示语】Ritheme主题美化RiProV2-网站WordPress美化二开

背景: 楼主的网站是用WordPress搭建的,并使用了正版主题RiProV2,但RiProV2在支付弹窗页没有价格,只在文章详情页会展示价格。本文就是美化这个支付弹窗,在支付弹窗页把价格字段加上,如下图所示: 美化前: 美化后 美化步骤: (1)定位到文件:/www/wwwroot/www.uu2i…

基于SpringBoot设计模式之创建型设计模式·抽象工厂模式

文章目录 介绍开始架构图&#xff08;以穿搭举例&#xff09;样例一&#xff08;html关于列表和表格的应用&#xff09;定义抽象工厂&#xff08;html&#xff09;定义抽象工厂需要制作抽象产物&#xff08;托盘&#xff09;定义具体工厂&#xff08;列表、表格&#xff09;定义…

海洋环境保护论文阅读记录

海洋环境保护 论文1&#xff1a;Critical role of wave–seabed interactions in the extensive erosion of Yellow River estuarine sediments 波浪-海床相互作用在黄河河口广泛侵中的关键作用 estuatine 河口的&#xff0c;港湾的 erodibility侵蚀度 sediment erodibility …

【Golang】Golang 的 HTTP 使用 Header 指南

文章目录 前言一、Header 解释二、代码实现三、hearder常见枚举值四、总结 前言 在构建和处理 HTTP 请求和响应时&#xff0c;Headers 扮演着重要的角色。它们提供了关于请求或响应的元数据&#xff0c;例如内容类型&#xff0c;编码&#xff0c;认证等。在 Go 语言中&#xf…

[PythonWeb:Django框架]:前后端请求调用;

文章目录 接着上篇项目app包下面创建static包&#xff0c;引入jquery&#xff0c;bootstrap 相关js文件views.py编写apicompute文件夹下面的urls.py路由模块引入views.py刚刚定义的函数html发送ajax请求 接着上篇 https://blog.csdn.net/Abraxs/article/details/138739727?sp…

24年湖南三支一扶报名详细流程(电脑报名)

24年湖南三支一扶报名详细流程&#xff08;电脑报名&#xff09; #湖南三支一扶 #湖南三支一扶考试 #三支一扶报名照片 #三支一扶考试 #三支一扶 #湖南省三支一扶

[语言月赛 202404] 吃苹果

题目描述 一共有 n 只苹果&#xff0c;你想要选择其中恰好两只苹果。 每只苹果有一个营养值 a1​,a2​,⋯,an​&#xff0c;你需要选择一只营养值最大的给 gza 吃&#xff0c;选择一只营养值最小的给 gza 的朋友 azg 吃。 请注意&#xff0c;由于某些苹果会有虫蚀等等&#…

Java基础(34)大型网站在架构上应当考虑哪些问题

大型网站的架构设计面临着多方面的挑战&#xff0c;这些挑战要求开发者和架构师在设计之初就需要考虑全面。以下是一些最关键的考虑因素&#xff0c;它们共同决定了一个大型网站是否能够成功满足业务需求、用户体验和技术发展的需要。 1. 可扩展性&#xff08;Scalability&…

深度剖析深度神经网络(DNN):原理、实现与应用

目录 引言 一、DNN基本原理 二、DNN核心算法原理 三、DNN具体操作步骤 四、代码演示 引言 在人工智能和机器学习的浪潮中&#xff0c;深度神经网络&#xff08;Deep Neural Network&#xff0c;简称DNN&#xff09;已经成为了一种非常重要的工具。DNN模仿人脑神经网络的结…

paddle ocr v4 2.6.1实战笔记

目录 效果图&#xff1a; 安装 模型权重是自动下载&#xff0c;如果提前下载会报错。 识别orc&#xff0c;并opencv可视化结果&#xff0c;支持中文可视化 官方原版预测可视化&#xff1a; 效果图&#xff1a; 安装 安装2.5.2识别结果为空 pip install paddlepaddle-gpu…

二维数组:行列互换/求最大值及其所在位置/求各行各列的和/矩阵乘积/深入理解二维数组

二维数组 1.定义 只有行号可以省略&#xff0c;初始化 全部初始化/部分初始化/不初始化 2.元素引用 3.存储形式 :顺序存储 按行存储 4.深入理解二维数组 #include<stdio.h> #include<stdlib.h>#define M 2 #define N 3int mian() {int a[M][N] {{1,2,3},{4,5,6}}…

【Python探索之旅】选择结构(条件语句)

文章目录 条件结构&#xff1a; 1.1 if单分支结构 1.2 if-else 多分支结构 1.3 if-elif 多重结构&#xff1a; 完结撒花​ 前言 Python条件语句是通过一条或多条语句的执行结果&#xff08;True或者False&#xff09;来决定执行的代码块。 Python提供了顺序、选择、循环三…

redis和mysql数据库主要的区别

MySQL和Redis作为两种不同类型的数据库&#xff0c;它们之间存在显著的区别&#xff0c;主要体现在以下几个方面&#xff1a; 数据结构与类型&#xff1a; MySQL&#xff1a;是一种关系型数据库管理系统(RDBMS)&#xff0c;支持丰富的数据结构&#xff0c;如表格形式的行和列&a…

Git详解之六:Git工具

现在&#xff0c;你已经学习了管理或者维护 Git 仓库&#xff0c;实现代码控制所需的大多数日常命令和工作流程。你已经完成了跟踪和提交文件的基本任务&#xff0c;并且发挥了暂存区和轻量级的特性分支及合并的威力。 接下来你将领略到一些 Git 可以实现的非常强大的功能&…

重学java 37.多线程基本了解

尽管走自己的路&#xff0c;别被那些三言两语击倒 —— 24.5.13 一、多线程_线程和进程 进程&#xff1a;在内存中执行的应用程序 线程:是进程中最小的执行单元线程作用:负责当前进程中程序的运行,一个进程中至少有一个线程,一个进程还可以有多个线程,这…