ECMAScript6第五章字符串处理方法扩展学习笔记

【深入理解ECMAScript 6】 字符串扩展(字符串是否包含、重复字符串、模板字符串) ECMAScript6 字符串扩展 目录ECMAScript6 字符串扩展一、字符串判断是否包含ES5ES6includes()startsWith()endsWith()二、重复字符串repeat()三、模板字符串1、什么是模板字符串2、原始字符串3、页面模板分析图 一、字符串判断是否包含 ES5 /* ES5 提供的判断是否包含的方法 string.indexOf(searchStr)方法 作用:返回指定字符串包含的指定子字符串的索引值 结果: 包含:返回第一个匹配的索引 阅读详情

String.fromCodePoint()

ES6 提供了String.fromCodePoint()方法,可以识别大于0xFFFF的字符

String.fromCodePoint(0x20BB7)
// "?"
String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'
// true

上面代码中,如果String.fromCodePoint方法有多个参数,则它们会被合并成一个字符串返回。

String.raw()

ES6 还为原生的 String 对象,提供了一个raw()方法。该方法返回一个被转义斜杠(即斜杠前面再加一个斜杠)的字符串,往往用于模板字符串的处理方法。

String.raw`Hi\n${2+3}!`;
// 返回 "Hi\\n5!"

String.raw`Hi\u000A!`;
// 返回 "Hi\\u000A!"

如果原字符串的斜杠已经转义,那么String.raw()会进行再次转义。

String.raw`Hi\\n`
// 返回 "Hi\\\\n"

String.raw`Hi\\n` === "Hi\\\\n" // true

String.raw()方法也可以作为正常的函数使用。这时,它的第一个参数,应该是一个具有raw属性的对象,且raw属性的值应该是一个数组。

String.raw({ raw: 'test' }, 0, 1, 2);
// 't0e1s2t'

// 等同于
String.raw({ raw: ['t','e','s','t'] }, 0, 1, 2);

作为函数,String.raw()的代码实现基本如下。

String.raw = function (strings, ...values) {
  let output = '';
  let index;
  for (index = 0; index < values.length; index++) {
    output += strings.raw[index] + values[index];
  }

  output += strings.raw[index]
  return output;
}

实例方法:codePointAt()

ES6 提供了codePointAt()方法,能够正确处理 4 个字节储存的字符,返回一个字符的码点。

let s = '?a';

s.codePointAt(0) // 134071
s.codePointAt(1) // 57271

s.codePointAt(2) // 97

codePointAt方法在第一个字符上,正确地识别了“?”,返回了它的十进制码点 134071(即十六进制的20BB7)。在第二个字符(即“?”的后两个字节)和第三个字符“a”上,codePointAt()方法的结果与charCodeAt()方法相同。

codePointAt()方法返回的是码点的十进制值,如果想要十六进制的值,可以使用toString()方法转换一下。


let s = '?a';

s.codePointAt(0).toString(16) // "20bb7"
s.codePointAt(2).toString(16) // "61"

你可能注意到了,codePointAt()方法的参数,仍然是不正确的。比如,上面代码中,字符a在字符串s的正确位置序号应该是 1,但是必须向codePointAt()方法传入 2。

解决这个问题的一个办法是使用for…of循环,因为它会正确识别 32 位的 UTF-16 字符。

let s = '?a';
for (let ch of s) {
  console.log(ch.codePointAt(0).toString(16));
}
// 20bb7
// 61

另一种方法也可以,使用扩展运算符(…)进行展开运算。

let arr = [...'?a']; // arr.length === 2
arr.forEach(
  ch => console.log(ch.codePointAt(0).toString(16))
);
// 20bb7
// 61

codePointAt()方法是测试一个字符由两个字节还是由四个字节组成的最简单方法。


function is32Bit(c) {
  return c.codePointAt(0) > 0xFFFF;
}

is32Bit("?") // true
is32Bit("a") // false

注意,fromCodePoint方法定义在String对象上,而codePointAt方法定义在字符串的实例对象上。

实例方法:normalize()

ES6 提供字符串实例的normalize()方法,用来将字符的不同表示方法统一为同样的形式,这称为 Unicode 正规化。

'\u01D1'.normalize() === '\u004F\u030C'.normalize()
// true

normalize方法可以接受一个参数来指定normalize的方式,参数的四个可选值如下。

  • NFC,默认参数,表示“标准等价合成”(Normalization Form Canonical Composition),返回多个简单字符的合成字符。所谓“标准等价”指的是视觉和语义上的等价。

  • NFD,表示“标准等价分解”(Normalization Form Canonical Decomposition),即在标准等价的前提下,返回合成字符分解的多个简单字符。

  • NFKC,表示“兼容等价合成”(Normalization Form Compatibility Composition),返回合成字符。所谓“兼容等价”指的是语义上存在等价,但视觉上不等价,比如“囍”和“喜喜”。(这只是用来举例,normalize方法不能识别中文。)

  • NFKD,表示“兼容等价分解”(Normalization Form Compatibility Decomposition),即在兼容等价的前提下,返回合成字符分解的多个简单字符。

不过,normalize方法目前不能识别三个或三个以上字符的合成。这种情况下,还是只能使用正则表达式,通过 Unicode 编号区间判断。

实例方法:includes(), startsWith(), endsWith()

  • includes():返回布尔值,表示是否找到了参数字符串。

  • startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。

  • endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。

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

let s = 'Hello world!';

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

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

实例方法:repeat()

repeat方法返回一个新字符串,表示将原字符串重复n次。


'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

参数如果是小数,会被取整。

'na'.repeat(2.9) // "nana"

如果repeat的参数是负数或者Infinity,会报错。

'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError

但是,如果参数是 0 到-1 之间的小数,则等同于 0,这是因为会先进行取整运算。0 到-1 之间的小数,取整以后等于-0,repeat视同为 0。

'na'.repeat(-0.9) // ""

参数NaN等同于 0。

'na'.repeat(NaN) // ""

如果repeat的参数是字符串,则会先转换成数字。

'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

实例方法:padStart(),padEnd()

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

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串。

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

如果用来补全的字符串与原字符串,两者的长度之和超过了最大长度,则会截去超出位数的补全字符串。

'abc'.padStart(10, '0123456789')
// '0123456abc'

如果省略第二个参数,默认使用空格补全长度。

'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

实例方法:trimStart(),trimEnd()

它们的行为与trim()一致,trimStart()消除字符串头部的空格,trimEnd()消除尾部的空格。它们返回的都是新字符串,不会修改原始字符串。

const s = '  abc  ';

s.trim() // "abc"
s.trimStart() // "abc  "
s.trimEnd() // "  abc"

除了空格键,这两个方法对字符串头部(或尾部)的tab键、换行符等不可见的空白符号也有效。

ECMAScript 6 字符串和数值的拓展 一、模板字符串 在我们的变成过程中,有时候我们需要在字符串中编写大量的HTML结构代码: const obj = { img: 'http://www.baidu.com/test.png', title: '离思', subTitle: '取次花丛懒回顾,半缘修道半缘君。', mess: ['唐','元稹'] }; let el = '<div>'+... 阅读详情

相关推荐

ECMAScript6新特性【字符串扩展、字符串新增方法、数值扩展、Math函数扩展】(三)-全面详解(学习总结---从入门到深化)

ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

499

JavaScript fromCharCode() 方法

JavaScript fromCharCode() 方法可接受一个指定的Unicode 值,然后返回一个字符串。本文章通过语法和示例解释了如何使用字符串 fromCharCode()方法。

wuxiaopengnihao1的博客 3048

PCIe网卡驱动实现分析(三)--- cache一致性

在现代处理器系统中,CPU的主频远高于主存读写速度,主存的读写速度成为程序执行效率的瓶颈;为了解决这个问题,在CPU和主存之间引入了Cache存储器,基于程序执行的局部性原理,在程序执行时,将正在使用的数据从主存拷贝一份到Cache,这样CPU就可以直接从Cache读写数据以改善主存读写速度慢的问题;

a935854743的博客 1779

【JavaScript】fromCharCode 和 fromCodePoint 的详解与应用

是 JavaScript 内置的一个静态方法,它将一组 Unicode 值转换为对应的字符,并返回一个字符串。这种方法非常适合于处理简单的字符编码转换。是要转换为字符的 Unicode 编码值。可以传入一个或多个数字。// 输出 "A"// 输出 "a"// 输出 "€"在这个例子中,我们传入了不同的 Unicode 编码值,分别返回了字符'A''a'和'€'。是 ES6 引入的一个更为强大的方法,它与类似,但可以处理更广泛的字符集。与只能处理 16 位编码的字符不同,

lph159的博客 2173

在Windows 11上用VirtualBox搞定WRF-Hydro 5.2.0:一个水文模型小白的Ubuntu 22.04虚拟机避坑实录

本文详细记录了在Windows 11上使用VirtualBox和Ubuntu 22.04虚拟机成功编译安装WRF-Hydro 5.2.0水文模型的全过程。从虚拟环境配置、依赖库安装到环境变量设置,作者分享了针对Linux新手的实用避坑技巧和关键命令,帮助科研人员高效完成水文模型的环境搭建。

weixin_30733003的博客 354

手把手教你用smarteye搭建免费GB28181监控平台(含海康设备接入避坑指南)

本文提供了一份基于SmartEye搭建免费GB28181视频监控平台的实战指南。详细介绍了从服务器部署、GB28181协议核心配置,到海康威视等主流设备接入的完整流程,并重点分享了设备注册失败、无法预览等常见问题的深度排错方法,旨在帮助中小企业及开发者低成本实现多品牌监控设备的统一管理。

pz89012345的博客 326

详细解析 replaceAll()方法

使用replaceAll方法获取关键数据

DU9999999的博客 5059

轻量级替代方案:用AIFlowy + Ollama在本地快速搭建一个可用的AI智能体平台

本文介绍了如何使用AIFlowy和Ollama在本地快速搭建轻量级AI智能体平台,涵盖从环境准备到智能体集成的全流程。通过简化部署步骤和优化性能,15分钟内即可完成搭建,适用于原型验证和小团队协作,显著提升开发效率。

weixin_29207533的博客 219

ES6---String字符串新方法汇总

模板字符串( template string )是增强版的字符串 ,用反引号(、)标识。它可 以当作普通字 符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

绝世唐门三哥的博客,多多关注,会不定期产出高质量文章和大家共享! 1036

WiFi基本概念(六)(L-STF,L-LTF)

L-STF它由10个OFDM symbol(1,0,1,0,1,0,1,0,1,0)构成,每个symbol是0.8us,GI是0.2us,总计10us。Symbol的长度是正常长度的1/4,因此称为Short training field,主要用于快速进行信号检测,信号同步,自动增益控制,接收天线选择(Diversity Selection)。 由于symbol长度是正常的1/4,子载波的宽度是正常的4倍,能进行初略的信道估计,其使用了-24, -20, -16, -12, -8, -4, 4, 8, 1

reekyli的专栏 6863

手把手教你完成基于YOLOv8的水果/商品/食堂/蔬菜/饮料/书籍识别与计价系统,前台+后台管理系统

手把手教你完成基于YOLOv8的商店的水果/商品/食堂/蔬菜/饮料/书籍识别与计价系统,前台+后台管理员系统,可进行目标检测的操作和展示,实现对图片、视频和摄像头的实时目标检测

在职AI算法工程师,擅长计算机视觉,YOLO目标检测、分割等,擅长web、pyqt界面可视化,好内容持续更新中,来这里跟大家一起学习,共同进步 2456

ES6字符串新增方法

es6新增字符串用法

Z00_hy的博客 343

音视频开发基础(1):模拟视频技术简介

模拟视频技术是指用模拟技术对动态影像进行捕捉、记来、处理、存储、传输、复现的技术.模拟视频技术的发明、发展与模拟电视系统的发展密不可分.下面将通过模拟电视系统来介绍模拟视频技术中的基本概念. 首先,人的视觉系统的特征为电视等視稿系铳的发明、发展提供了理论依据.光线通过角膜、腫孔、晶状体的折射光线.透过玻璃体到达视网展.视网膜上分布着光感受器,光感受器在光线的剌激下...

琅嬛福地 1493

第二章 ECMAScript6 扩展

另外,Set 对象还提供了几个用于遍历的方法:keys()、values() 和 entries()(对于 Set 来说,这三个方法返回的都是相同的迭代器对象,因为 Set 没有键和值的区别,每个元素既是键也是值)。在JavaScript ES6及之后的版本中,对象的扩展引入了一些新的语法和特性,使得对象字面量的创建、属性的定义、复制和合并等操作变得更加简洁和强大。ES6 引入了 Map 对象,它是一种键值对的集合,类似于对象,但 “键” 的范围不限于字符串,任何类型的值(对象或原始值)都可以作为键。

上官花雨滴博客!!! 1385

【推荐100个unity插件】基于节点的程序化无限地图生成器 —— MapMagic 2

MapMagic 2是一款基于节点的程序化地形生成工具,可快速创建无限地图。主要功能包括:通过图形化节点编辑器构建地形逻辑;支持四个核心模块(对象、样条线、生物群落和笔刷);提供完整的操作指南,包括创建资产、使用编辑器窗口、节点操作等。工具具有直观的UI界面,支持节点连接、参数调整、图层管理等功能,并能实时生成地形。适合游戏开发者快速构建高质量的可玩地形环境。

向宇的博客,专注php/web全栈 unity游戏开发,欢迎大家评论纠错 3121

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

ECMAScript 6之字符串的扩展

ECMAScript 6之字符串的扩展 ECMAScript 6对字符串进行了许多增强与改造,下面会逐个介绍。 1. 字符的 Unicode 表示法 ES6 加强了对 Unicode 的支持,允许采用\uxxxx形式表示一个码点在\u0000~\uFFFF之间的字符,其中xxxx表示字符的 Unicode 码点。 '\u0061'; // 'a' '\u0062'; // 'b' 对于Unico...

基地的博客 496

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

《ECMAScript 6 入门》【三、字符串的扩展】(持续更新中……)

本系列是针对于阮一峰大佬的文章进行简化,更方便的让大家学习阅读 前言: 本篇介绍 ES6 对字符串的改造和增强。 一、字符的 Unicode 表示法 字符的 Unicode 码点必须在\u0000~\uFFFF之间,\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点。 const {log} = console; log('\u0061'); //a xxxx超出这个...

主要领域:前端开发 7468

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

ECMAScript-es6字符串的扩展

一、ECMAScript-es6字符串的扩展 1. 字符串Unicode表示法 // es6 \uxxxx \u:表示Unicode字符,xxxx表示码点范围:0000~ffff // 比如:\u20BB7 -> \u20BB+7 是超出范围的 // es6中表示法:\u{20BB7} // 表示一个字符'z' // 1. 就是一个'z' // 2. '\z' // 3. 八进制:\HHH // 4. 十六进制:\xHH // 5. es:\u007A // 6. es:\u{7A} 2. 字符

东东爱编码博客 198

ECMAScript 6学习笔记之----字符串的扩展

String的基本方法charAt,concat,slice,substr,indexOf,trim var stringObject = new String(" hello, world "); print(stringObject.charAt(0)); print(stringObject[1]); print(stringObject.concat([',java', 'go']))...

凌霄的专栏 305

ECMAScript 6学习笔记

①简介,ES6 是 JavaScript 下一代标准,与 ECMAScript、JavaScript 关系密切;②基本语法,涵盖 let、const 声明,解构赋值,模板字符串等;③Promise 用于异步编程;④模块化,ES6 引入该特性,通过 export 和 import 实现模块的导出与导入,还有箭头函数、函数默认参数等语法的介绍,帮助理解 ES6 在 JavaScript 编程中的应用。

m0_67226963的博客 952

ECMAScript6简介——字符串的扩展

文章目录字符串的扩展字符串的遍历器接口 字符串的扩展 ES6加强了对Unicode的支持,并且扩展了字符串的对象。 字符串的Unicode表示法 JS允许采用\uxxxx形式表示一个字符串,其中xxxx表示字符串Unicode码点。 "\u0061" //"a" 但是这种形式只限于码点在\u0000~\UFFFF之间的字符。超出这个范围的字符,必须用两个双字节的形式表示。 "\uD842\uDFB7" // "????" "\u20BB7" // " 7" 上面的代码表示,如果直接在\u

qiuqiudongdong的博客 226

全栈之路——前端(一):ES6之字符串、正则的扩展

ES6对字符串和正则表达式进行了多项增强。字符串方面,扩展了Unicode表示法,支持大括号码点;增加Iterator接口,使for...of能正确识别Unicode字符;允许直接输入U+2028和U+2029特殊字符;引入模板字符串支持嵌入变量和表达式。正则方面,新增u修饰符处理四字节字符,y修饰符实现粘连匹配,s修饰符(dotAll模式)让.匹配所有字符;提供flags属性获取修饰符;支持Unicode属性类和具名组匹配。这些改进使JS更好地处理Unicode字符和复杂正则匹配场景。

whu_three的博客 1026

《ECMAScript6入门》-字符串的扩展

1.字符串的扩展 ES6 只要将码点放入大括号,就能正确解读该字符。 "\u{20BB7}" // "????" "\u{41}\u{42}\u{43}" // "ABC" let hello = 123; hell\u{6F} // 123 '\u{1F680}' === '\uD83D\uDE80' // true 2.字符串的遍历器接口 ES6 为字符串添加了遍历器接口,使得字符串可以被for…of循环遍历。 除了遍历字符串,这个遍历器最大的优点是可以识别大于0xFFFF的码点,传统的for循

如果我年少有为不自卑 281

Ecmascript 6解构赋值及扩展

Ecmascript 6 ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。 Ecmascript 是 JavaScript 语言的标注规范 JavaScript 是 Ecmascript 规范的具体实现 具体实现取决于各...

chunejin7423的博客 194

ECMAScript6语法

简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目 标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。 https://es6.ruanyifeng.com/#README ECMAScript 和 JavaScript 的关系 一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系? 要讲清楚这个问题,需要回顾历史。 1996 年 11 月,Jav

kylin's study 8134

ES6个人笔记记录——字符串扩展

关于ES6的一些学习笔记 // console.log("\u0061"); console.log("\uD842\uDF02"); let s1 = "好"; console.log("好",s1.length); let s = "????"; console.log(s,s.length,s.charAt(0),s.charAt(1),s.charCodeAt(0),s.charCodeAt(1...

whmJack的博客 7万+
上一篇: ECMASCript6 第四章 字符串的扩展
下一篇: es6第六章学习
跟着大佬学习
博客等级 码龄8年 2粉丝 20原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值