ES6字符串的扩展实例


Posted in Javascript onDecember 21, 2020

本节我们来学习 ES6 中字符串类型的扩展,包括一些字符串对象的新增方法的使用等。

字符的 Unicode 表示法

ES6 加强了对 Unicode 的支持,JavaScript 中可以采用 \\uxxx 形式表示一个字符,其中 xxxx 表示字符的码点。例如:

console.log("\u0075"); // u

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

console.log("\uD842\uDFB7"); // ?
console.log("\u20BB8"); // 8

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

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

console.log("\u{20BB7}"); // ?

console.log("\u{41}\u{42}\u{43}"); // ABC

let hello = 123;
console.log(hell\u{6F}); // 123

 
console.log('\u{1F680}' === '\uD83D\uDE80'); // true

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

有了这种表示法之后,JavaScript共有6种方法可以表示一个字符。

'\z' === 'z' // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true

遍历器接口

ES6 为字符串添加了遍历器接口,使得字符串可以被 for...of 循环遍历。

示例:
例如我们遍历字符串 xkd:

for (let i of 'xkd') {
 console.log(i)
}

输出:

x
k
d

除了遍历字符串,这个遍历器最大的优点是可以识别大于 0xFFFF 的码点,传统的 for 循环无法识别这样的码点。

示例:

let a = String.fromCodePoint(0x20BB7);

for (let i = 0; i < a.length; i++) {
 console.log(a[i]);
}

for (let i of a) {
 console.log(i);
}

上述代码中,字符串 a 只有一个字符,但是 for 循环会认为它包含两个字符(都不可打印),而 for...of 循环会正确识别出这一个字符。

模板字符串的使用

我们在 JavaScript 语言中,如果要输出内容,通常可以像下面这样写的:

var name = "侠课岛";
var age = 10;
console.log("我的名字是"+ name + ",我今年" + age + "岁了。" );
// 输出:我的名字是侠课岛,我今年10岁了。

这种写法需要使用大量的双引号和加号来拼接才能得到我们需要的模板,非常不方便。

而在 ES6 中提供了模板字符串,只需要将想要输出的内容用反引号标识,然后变量部分使用 ${} 括起来即可。

示例:
上面的例子可以用模板字符串写成下面这样:

var name = "侠课岛";
var age = 10;
console.log( `我的名字是${name} ,我今年${age}岁了。`);

// 输出:我的名字是侠课岛,我今年10岁了。

这样写很明显语法语法简洁了很多,不需要再使用大量的双引号和加号来拼接字符串和变量。

模板字符串都是使用反引号表示的,如果我们希望在模板字符串中使用反引号,则需要在前面使用反斜杠 \\ 转义。

示例:

let content = `\`hello\` xkd!`;
console.log(content); // 输出:`hello` xkd!

如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。

console.log( `你好\` 我叫做侠课岛,
今年3岁啦!`);

执行代码后,会直接输出如下所示内容:

你好` 我叫做侠课岛,
 今年3岁啦!

在模板字符串中嵌入变量

如果我们想要在模板字符串中嵌入变量,那么变量需要写在 ${} 之中才能够正常使用,否则会当做普通字符串输出。

示例:

var name= "xkd";
console.log(`你好,${name}`);

// 输出:你好,xkd

但是如果模板字符串中的变量没有被声明,将导致报错哟。

let content = `Hello, ${name}`;
console.log(content);  // 输出:ReferenceError: name is not defined

由于模板字符串的大括号内部,就是执行 JavaScript 代码,因此如果大括号内部是一个字符串,将会原样输出。

let content = `Hello, ${"xkd"}`;
console.log(content); // 输出:Hello, xkd

大括号 ${} 内部可以放入任意的 JavaScript 表达式,可以进行运算,以及引用对象属性。

var a = 10;
var b = 20;
console.log(`a=${++a}, b=${a+b}`);

// 输出:a=11, b=31

在模板字符串中调用函数

ES6 中模板字符串有一个更强大的功能,就是我们可以在模板字符串之中调用函数。

示例:

function show() {
 return "侠课岛";
}

console.log(`你好,你叫什么名字?
你好,我叫${show()}`);

执行代码后,输出内容如下所示:

你好,你叫什么名字?
你好,我叫侠课岛

如果大括号中的值不是字符串,将按照一般的规则转为字符串。比如,大括号中是一个对象,将默认调用对象的toString 方法。

判断是否包含子字符串

JavaScript 想要判断字符串是否包含子字符串,可以使用 indexOf() 方法。但是在 ES6 中又新增了三种方法可以用来判处案是否包含子字符串,如下所示:

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

示例:

这三个方法都可以接受两个参数,第一个参数为需要搜索的字符串,第二个参数为可选的搜索起始位置索引:

let string = "hello, xkd";

console.log(string.includes("hello")); // true
console.log(string.startsWith("x", 7)); // true
console.log(string.endsWith("abc"));  // false

注意上述方法的返回值都为布尔值,所以如果需要知道子字符串的位置,还是得用 indexOf() 和 lastIndexOf() 方法。

字符串重复

在 ES6 中新增了一个 repeat() 方法,用于返回新的字符串,表示将字符串重复指定次数返回。

示例:

console.log("a".repeat(5)); // 输出:aaaaa

如果 repeat() 函数中的参数为小数,则会向下取整:

console.log("a".repeat(3.1)); // 输出:aaa
console.log("b".repeat(4.5)); // 输出:bbbb
console.log("c".repeat(5.9)); // 输出:ccccc

如果参数为 0 到 -1 之间的小数,会进行取整运算,0 至 -1 之间的小数取整得到 -0,等同于重复零次:

console.log("a".repeat(-0.1)); // 输出:""
console.log("b".repeat(-0.9)); // 输出:""

如果传入的参数是字符串,则会先将字符串转化为数字:

console.log("a".repeat("five")); // 输出: ""
console.log("b".repeat("3"));  // 输出: bbb

字符串补全

ES6 中为字符串补全提供了两个新的方法,如下所示:

  • padStart():返回新的字符串,表示用参数字符串从头部(左侧)补全原字符串。
  • padEnd():返回新的字符串,表示用参数字符串从尾部(右侧)补全原字符串。

这两个方法接受两个参数,第一个参数是指定生成的字符串的最小长度,第二个参数是用来补全的字符串。如果没有指定第二个参数,默认用空格填充。

示例:

console.log("xkd".padStart(5, "o")); // 输出:ooxkd 
console.log("a".padEnd(3, "xkd"));  // 输出:axk
console.log("b".padStart(3));    // 输出: b

如果指定的长度小于或者等于原字符串的长度,则返回原字符串:

console.log("hello".padStart(3,"a")); // hello
console.log("hello".padStart(7,"a")); // aahello

如果原字符串加上补全字符串长度大于指定长度,则截去超出位数的补全字符串:

console.log("hello".padEnd(7,",xkd!"));  // hello,x
console.log("abcde".padEnd(10,"fghijk")); // abcdefghij

还可以用于补全位数:

console.log("1".padStart(10, "0")); // 0000000001
console.log("2".padEnd(10, "0"));  // 2000000000

到此这篇关于ES6字符串的扩展实例的文章就介绍到这了,更多相关ES6字符串扩展内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript中的对象创建 实例附注释
Feb 08 Javascript
js导航菜单(自写)简单大方
Mar 28 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
关于微信小程序bug记录与解决方法
Aug 15 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
vue-router的hooks用法详解
Jun 08 Javascript
vue 组件简介
Jul 31 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
vue实现购物车的小练习
Dec 21 #Vue.js
Vue实现小购物车功能
Dec 21 #Vue.js
原生JS实现京东查看商品点击放大
Dec 21 #Javascript
基于javascript实现移动端轮播图效果
Dec 21 #Javascript
原生JS实现pc端轮播图效果
Dec 21 #Javascript
js实现移动端轮播图滑动切换
Dec 21 #Javascript
vue监听滚动事件的方法
Dec 21 #Vue.js
You might like
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
Python文件夹与文件的操作实现代码
2014/07/13 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
python实现批量修改文件名代码
2017/09/10 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
python交互式图形编程实例(三)
2017/11/17 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
盛大笔试题
2016/11/05 面试题
高中地理教学反思
2014/01/29 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
Oracle 多表查询基本语法实例
2022/04/18 Oracle