es6 对字符串的扩展

最新推荐文章于 2022-04-15 10:09:01 发布
最新推荐文章于 2022-04-15 10:09:01 发布
阅读量424 收藏
点赞数
分类专栏： js es6 文章标签： js es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhouxin_182/article/details/79346895
版权

js底层采用的是utf-16的编码方式，平时我们可能对utf-8更熟悉一些，他们的区别在于utf-16是采用16位，用两字节来表示一个字符（Unicode码点在\u0000~\uFFFF之间的字符），而utf-8是8位，会根据情况来用一个字节、两个字节，最多不超过三个字节来表示一个字符。

因为utf-16是用两个字节表示，所以大于两个字节的字符，用es5的方法就会出错，例如

这里写图片描述
这个字需要四个字节来存储，js把它识别为两个字符，es5的方法没法来正确处理它，es6为了解决类似的问题，提出了配套的新方法，codePointAt代替charCodeAt，at代替charAt，fromCodePoint代替fromCharCode

他们的用法与原来的基本一样

但有一点值得注意的是，es6只算是一种语法糖，并不会改变js底层utf-16编码的本质，只是可以在处理这些问题的时候可以把这四个字节看成一个字，但当我们取长度，或者取某一位时，还是会以两个字节为一个长度，像这样：
这里写图片描述
取第零位时，已经正确的把这个字转为了10进制码点，第一位表示的是它的后两个字节，第二位才是它后面的a
这样看起来不友好，我们可以配合es6的for…of方法
这里写图片描述
这样看起来就合理一些。
东西总是要配套的，所以es6跟字符串相关的方法都做了修正，解决了超过两字符的问题，我们尽量使用es6的方法

字符串相关的新方法还有很多，像includes，startsWith，endsWith，padStart，padEnd等。有兴趣的点这里阮一峰es6-字符串的扩展

ES6(字符串）
姜皓的博客
05-02 466
ES6新增字符串特性一、Unicode的表示法 当码值>2个字节（0xff）即第一个数字未处理，不显示处理这种超过2字节的情况，用{}包起来即可二、API1.ES5中码值>2个字节，长度为22.1和2为第一位置和第二位置的字符，3和4为第一位置和第二位置的码值，字符均为乱码，但其码值可以取出来。即ES5中对Unicode的处理不到位。 ES6中 ES6中新增codePoint API来...
ES6字符串和数组方法使用
g841805的博客
03-10 1178
方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。上面代码表示将从3号位直到数组结束的成员（4和5），复制到从0号位开始的位置，结果覆盖了原来的1和2。如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。
ES6字符串的扩展
zhouyuzhu666的博客
10-04 275
1、 es6为字符串添加了遍历器接口，使得字符串可以被for…of循环遍历 for(let item of 'hello'){ console.log(item); } //结果 //'h' //'e' //'l' //'l' //'o' 2、字符串的新增方法 (1)includes()：返回布尔值，表示是否找到了参数字符串 let s = 'hello world!'; console.log(s.includes('e'));//true (2)startsWith():返回布尔值，表示参数
ES6之字符串的扩展
weixin_43025823的博客
09-15 329
作者： kim 来源： 自创 已经有一段时间没更新关于ES6的知识点了，主要还是因为时间有点紧，小编现在即沉迷于工作，也在坚持运动，最最最最重要的还是少了点写作的动力。但是不管怎么样，每周至少还是会更新一篇，内容不限。今天接着讲ES6中对字符串的扩展知识点。 判断某字符串是否包含在另外字符串中 会JS的兄跌应该知道原生的JavaScript使用的是indexOf()方法来判断字符串中是否包...
ES6字符串扩展：
apeiziwei的博客
04-13 222
ES6字符串扩展 1、字符串新增特性：Unicode表示法、遍历接口、模板字符串、新增方法（10种）； 2、charPointAt （取码值）：ES6中的charPointAt（0）会处理4个字节，而charPointAt（1）会处理4个字节中的后2个字节；ES5中的charCodeAt（）一次只处理两个字节； 3、ES5中的fromCharCode（），ES6的fromCharPoint（）唯一的区别是：能不能处理Unicode的字符； 4、includes（）：判断字符串中是否包含某一字符（串）； 5、
JavaScript中ES6字符串扩展方法
10-21
这些ES6字符串扩展方法的引入，提高了JavaScript编程的效率和可读性。通过简单的API，开发者可以轻松实现之前需要通过复杂逻辑实现的功能。ES6中的字符串方法还包括了trimStart()、trimEnd()、matchAll()等，这些...
es6-string-html：es6多行字符串中的突出显示代码
02-05
ES6字符串HTML 在es6多行字符串中添加了对代码的语法突出显示支持： HTML（包括带引号和未引号的html的atts） SQL 社区 在ES6模板文字中突出显示CSS 在python多行字符串中突出显示SQL代码 在多行字符串中突出显示...
ES6中字符串的使用方法扩展
10-16
在探讨ES6中字符串的使用方法扩展之前，我们先了解一下ES5及以前版本的字符串表示和操作方法。在ES5中，Unicode字符可以通过"\uxxxx"的形式表示，其中“xxxx”代表字符的码点。这种表示方法只适用于码点在\u0000到\...
ES6学习笔记（一）——字符串的扩展
扬扬羊的博客
01-20 785
预备知识 ES6对Unicode的支持 字符的Unicode表示法 codePointAt StringfromCodePoint at normalize includes startsWith endsWith repeat padStart padEnd 模板字符串 标签模板tagged template 预备知识 utf-16：把Unicode字符集的抽象码位映射
ECMAScript6笔记：字符串的扩展(2)
YuqiRealm.com
11-06 456
ECMAScript6笔记：字符串的扩展(2)
【ES6】11-字符串的扩展
学无止境
04-15 773
【ES6】11-字符串的扩展
ES6 字符串扩展
wuyujin1997的博客
04-09 319
str.成员方法() includes(searchString, ?startPosition) 从指定位置开始查找，字符串是否包含指定字符串(之前使用indexOf()和lastIndexOf())。 startsWith(searchString, ?startPosition) 本字符串是否以指定字符串开头(从position开始算起) endWith(searchString...
ES6字符串扩展
樊云飞
12-06 178
字符串模板，``和${’’} let a=` <ul> <li>${'哈哈'}</li> </ul> `
ES6之字符串拓展
njafei的博客
05-23 536
ES6中，还是对字符串做了很多的改进，尤其是函数方面，增加了很多个方法。但是核心的变动，其实只有两个： Unicode拓展 字符模板 Unicode拓展在讲ES6之间，我们先了解一些背景知识。为什么会出现Unicode我们知道，计算机最底层其实只能识别‘0’和‘1’，就是yes或者no。但是人脑是非常高级的，我们见面会打招呼“您吃了没？”，这句话如果是想告知计算机的话，它肯定是听不懂的，最后计算机接
ES6之字符串扩展
hy_ethel的博客
01-12 247
在ES6中，为字符串扩展了几个新的API： includes() ，返回布尔值，表示是否找到了参数字符串。 startsWith()，返回布尔值，表示参数字符串是否在原字符串的头部。 endsWith()，返回布尔值，表示参数字符串是否在原字符串的尾部。 示例如下： let str = "hello ES6"; console.log(str,"中是否包含了ES6：",str.includes...
es6字符串的扩展
hline123的博客
11-22 208
es6字符串的扩展
ES6—字符串的扩展
meicx_bupt的博客
05-25 192
1、可用unicode表示一个字符 \u*** 其中*为字符的码点 (1) codePointAt() 获取当前字符的unicode编码，能够正确处理4个字节存储的字符 (2) String.fromCodePoint() 从unicode编码转换成字符 2、字符串遍历及读取方法 (1) for value of str 对字符串进行遍历 (2) at() 获取指定位...
es6模板字符串方法传参
最新发布
03-11
### ES6 模板字符串传参 在 JavaScript 中，ES6 引入了模板字符串的功能，允许更方便地创建多行字符串以及嵌入表达式。当涉及到向模板字符串传递参数时，可以使用 `${expression}` 的形式将变量或表达式的值插入到字符串中[^2]。 对于简单的插值需求： ```javascript const name = "Alice"; const greeting = `Hello, ${name}`; console.log(greeting); // Hello, Alice ``` 除了基本的数据绑定外，在某些场景下可能还需要处理逻辑判断或者循环结构等内容。由于标准的模板字符串并不直接支持这些功能，因此可以通过定义自定义标签函数的方式来扩展其能力[^3]。 下面是一个带有条件渲染的例子： ```javascript function conditionalTag(strings, ...values) { let result = ''; values.forEach((value, index) => { if (value !== undefined && value !== null && value !== '') { result += strings[index] + value; } else { result += strings[index]; } }); return result + strings[strings.length - 1]; } let user = { name: 'Bob', age: '' }; let bio = conditionalTag`Name: ${user.name}, Age: ${user.age}`; console.log(bio); // Name: Bob, ``` 此例子展示了通过构建一个名为 `conditionalTag` 的标签函数实现了仅当给定属性存在有效值时才将其加入最终输出的能力。 #### 处理复杂情况下的数据展示 考虑到更为复杂的业务逻辑，比如列表项遍历，则通常会结合其他库（如 lodash 或者专门的模板引擎）完成此类任务；不过也可以尝试编写自己的解决方案来满足特定的需求。 例如，这里给出了一种模拟 Mustache 和 Nunjucks 风格语法的方式来进行书籍集合的渲染： ```javascript var myBooks = [ { title: 'JavaScript The Good Parts', author: 'Douglas Crockford' }, { title: 'Eloquent JavaScript', author: 'Marijn Haverbeke' }]; function hashTemplate(literals, ...placeholders) { const template = literals.join('${}'); placeholders.forEach((placeholder, i) => template.replace(`#${i}`, placeholder)); // 此处简化处理，实际应解析并执行完整的模板指令集 return eval('`' + template.replaceAll('#{', '${') + '`'); } var libraryHtml = hashTemplate` <ul> #for book in ${JSON.stringify(myBooks)} <li><i>${book.title}</i> by ${book.author}</li> #/for </ul>`; console.log(libraryHtml); /* 输出类似于： <ul> <li><i>JavaScript The Good Parts</i> by Douglas Crockford</li> <li><i>Elegant JavaScript</i> by Marijn Haverbeke</li> </ul>*/ ``` 上述代码片段演示了一个基于纯虚构模板语言的概念验证版本，其中包含了对数组元素迭代的支持。需要注意的是这只是一个简化的实现方式，并未完全遵循任何现有的模板规范。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值