探索ES6世界:字符串的新玩法

引言

欢迎来到JavaScript的未来 - ECMAScript 2015,更亲切地被称为ES6。这个版本为我们带来了许多令人兴奋的新功能,其中之一是字符串的一系列新方法。让我们一起揭开这些方法的神秘面纱,看看它们如何让我们在字符串的世界里游刃有余,轻松愉快地处理数据。

ES6字符串新增方法

String.fromCodePoint() - 魔法代码

首先,让我们谈谈String.fromCodePoint()。这个方法就像一个神奇的魔法师,可以通过代码点序列为我们创建字符串。只需告诉他你想要的代码点,他就会为你创造出令人惊叹的字符串。

javascript 复制代码
console.log(String.fromCodePoint(65, 90)); // "AZ"

String.raw() - 脱离转义的原始力量

有时候,我们想要字符串中的转义字符生效,不被转义。这时,String.raw()就是我们的救星。它能够返回一个模板字符串的原始形式,让转义字符保持原貌。

javascript 复制代码
console.log(String.raw`Hello\nWorld`); // "Hello\nWorld"

codePointAt() - 字符编码点的旅程

codePointAt()方法是我们在字符串中导航的向导,告诉我们在指定位置的字符是什么。让我们一起来体验一下:

javascript 复制代码
let str = 'ABC';
console.log(str.codePointAt(1)); // 66

normalize() - 奇妙的Unicode正规化

字符串的normalize()方法能够以一种奇妙的方式返回Unicode正规化形式,让字符串更加清晰明了。

JavaScript 复制代码
console.log('é'.normalize()); // "é"

串门的 includes, startsWith, endsWith

这一组方法是我们的三兄弟,用于检查字符串是否包含、以某字符开始或以某字符结束。这就像串门大冒险,让我们看看字符串的尽头是否有宝藏!

JavaScript 复制代码
let str = 'Hello, World!';

console.log(str.includes('World')); // true
console.log(str.startsWith('Hello')); // true
console.log(str.endsWith('!')); // true

repeat() - 重复是最好的陪伴

repeat()方法让我们可以轻松地将字符串复制多次,就像魔术师一样,让字符串重复起舞。

JavaScript 复制代码
console.log('abc'.repeat(3)); // "abcabcabc"

padStart() 和 padEnd() - 字符串的梦幻装饰

这一对方法就像字符串的梦幻装饰师,可以将字符串填充到指定长度,让它看起来更加漂亮。

JavaScript 复制代码
console.log('5'.padStart(2, '0')); // "05"
console.log('42'.padEnd(5, '*')); // "42***"

trimStart() 和 trimEnd() - 清理字符串的门卫

门卫的工作就是清理门口,而trimStart()trimEnd()就是字符串的门卫,可以清理掉字符串开头或结尾的空格。

JavaScript 复制代码
console.log('  Hello  '.trimStart()); // "Hello  "
console.log('  Hello  '.trimEnd()); // "  Hello"

matchAll() - 正则的大揭秘

matchAll()方法就像是字符串正则的大揭秘,它返回一个包含所有匹配结果的迭代器,为我们揭示字符串中隐藏的秘密。

JavaScript 复制代码
let regex = /(\w+)\s/g;
let str = 'Hello World';
let matches = [...str.matchAll(regex)];
console.log(matches); // [["Hello "], ["World"]]

replaceAll() - 替换的狂欢

replaceAll()方法是字符串替换的狂欢节,可以一次性替换掉所有匹配的子字符串,真是太方便了!

JavaScript 复制代码
let str = 'apple apple apple';
console.log(str.replaceAll('apple', 'orange')); // "orange orange orange"

at() - 位置的把控

最后,at()方法就像是字符串的导航官,可以准确地返回指定位置的字符。一起来感受一下:

JavaScript 复制代码
let str = 'abc';
console.log(str.at(1)); // "b"

总结

在ES6的字符串世界里,我们有了更多的玩法,更多的方法可以帮助我们在字符串的大舞台上轻松有趣地表演。让我们一起畅游在这个充满魔法和创意的字符串之旅吧!

结语

那么到了这里我们今天的文章就结束啦~

创作不易,如果感觉这个文章对你有帮助的话,点个赞吧♥

更多内容字符串的常用方法还记得吗? 忘记了就来看看吧~

ReacheMe : GitHub Gitee

相关推荐
钛态8 小时前
前端安全防线:CSRF 攻击链路与双重 Token 校验的工程实现
前端·vue·react·web
张拭心9 小时前
技术管理笔记:让我“燃尽”的一天
前端
触底反弹10 小时前
🔥 Git 从零到精通:彻底搞懂核心概念与工作原理
git·面试·开源
不好听61310 小时前
BFF 架构实战:从前端直调 API 到加入中间层
前端·架构
不好听61310 小时前
前端跨域完全指南:从为什么报错到三种解决方案
前端
三84410 小时前
路由策略/控制 配置双点双向路由重发布
服务器·前端·javascript
Qimooidea11 小时前
祁木 CAD Translator 工程图纸出海实战指南
服务器·前端·安全
小林ixn11 小时前
从BFF到SSE:我在Vue项目里藏了个“AI翻译官”
前端·vue.js·vite
元气少女小圆丶12 小时前
unity发布web嵌入到前端页面的接受参数
前端·unity·webgl
工业HMI实战笔记12 小时前
【拯救HMI】:低碳制造:自动化技术如何助力企业节能降耗
运维·前端·自动化·交互·制造