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 相关文章推荐
IE iframe的onload方法分析小结
Jan 07 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
javascript学习之json入门
Dec 22 Javascript
vue仿淘宝订单状态的tab切换效果
Jun 23 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
jQuery实现高级检索功能
May 28 jQuery
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
使用原生javascript开发计算器实例代码
Feb 21 Javascript
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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
php单例模式的简单实现方法
2016/06/10 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
Javascript 实用小技巧
2010/04/07 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Python3生成手写体数字方法
2018/01/30 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
python爬虫要用到的库总结
2020/07/28 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
泰国网上购物:Shopee泰国
2018/09/14 全球购物
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
社区科普工作方案
2014/06/03 职场文书
学用政策心得体会
2014/09/10 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书