探索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

相关推荐
顾平安1 小时前
Promise/A+ 规范 - 中文版本
前端
聚名网1 小时前
域名和服务器是什么?域名和服务器是什么关系?
服务器·前端
桃园码工1 小时前
4-Gin HTML 模板渲染 --[Gin 框架入门精讲与实战案例]
前端·html·gin·模板渲染
沈剑心1 小时前
如何在鸿蒙系统上实现「沉浸式」页面?
前端·harmonyos
码农爱java1 小时前
设计模式--抽象工厂模式【创建型模式】
java·设计模式·面试·抽象工厂模式·原理·23种设计模式·java 设计模式
一棵开花的树,枝芽无限靠近你1 小时前
【PPTist】组件结构设计、主题切换
前端·笔记·学习·编辑器
m0_748237051 小时前
Chrome 关闭自动添加https
前端·chrome
开心工作室_kaic1 小时前
springboot476基于vue篮球联盟管理系统(论文+源码)_kaic
前端·javascript·vue.js
川石教育1 小时前
Vue前端开发-缓存优化
前端·javascript·vue.js·缓存·前端框架·vue·数据缓存
搏博2 小时前
使用Vue创建前后端分离项目的过程(前端部分)
前端·javascript·vue.js