es6 字符串String的扩展(实例讲解)


Posted in Javascript onAugust 03, 2017

新特性:模板字符串

传统字符串

let name = "Jacky";
let occupation = "doctor";
 //传统字符串拼接
let str = "He is "+ name +",he is a "+ occupation;

es6简洁的字符串拼接

let name = "Jacky";
let occupation = "doctor";
//模板字符串拼接
let str = `He is ${name},he is a ${occupation}`;

对比两段拼接的代码,模板字符串使得我们不再需要反复使用双引号(或者单引号)了;而是改用反引号标识符(`),插入变量的时候也不需要再使用加号(+)了,而是把变量放入${ }即可。

使用时要注意

1、可以定义多行字符串

传统的多行字符串写法:

let str = "write once ," +
 "run anywhere";

模板字符串的写法:

let str = `write once ,
 run anywhere`;

直接换行即可,但是要注意的是:所有的空格和所进都会被保留在输出中。如果控制台输出字符串str的话,代码上换了行,控制台输出的时候也会换行。

2、${ }中可以放任意的javascript表达式

${ }中可以是运算表达式

var a = 1;
var b = 2;
var str = `the result is ${a+b}`;
//进行加法运算 结果:the result is 3

${ }中可以是对象的属性

var obj = {"a":1,"b":2};
var str = `the result is ${obj.a+obj.b}`;
//对象obj的属性
//结果:the result is 3.

${ }中可以是函数的调用

function fn() {
return 3;
}
var str = `the result is ${ fn() }`;
//函数fn的调用,结果:the result is 3

标签模板

这里的模板指的是上面讲的字符串模板,用反引号定义的字符串;而标签,则指的是一个函数,一个专门处理模板字符串的函数。

var name = "张三";
var height = 1.8;

tagFn`他叫${name},身高${height}米。`;
//标签+模板字符串

//定义一个函数,作为标签
function tagFn(arr,v1,v2){
console.log(arr); 
//结果:[ "他叫",",身高","米。" ]
console.log(v1); 
//结果:张三
console.log(v2); 
//结果:1.8
}

以上代码有两处要仔细讲解的,首先是tagFn函数,是我们自定义的一个函数,它有三个参数分别是arr,v1,v2。函数tagFn的调用方式跟以往的不太一样,以往我们使用括号( )表示函数调用执行,这一次我们在函数名后面直接加上一个模板字符串,如下面的代码:

tagFn`他叫${name},身高${height}米。`;

这样就是标签模板,你可以理解为标签函数+模板字符串,这是一种新的语法规范。

接下来我们继续看函数的3个参数,从代码的打印结果我们看到它们运行后对应的结果,arr的值是一个数组:[ "他叫" , ",身高" , "米。" ],而v1的值是变量name的值:“张三”,v2的值是变量height的值:1.8。

你是否看出规律了:第一个参数arr是数组类型,它是内容是模板字符串中除了${ }以外的其他字符,按顺序组成了数组的内容,所以arr的值是[ "他叫", ",身高" , "米。" ];第2,3个参数则是模板字符串中对应次序的变量name和height的值。

标签模板是ES6给我们带来的一种新语法,它常用来实现过滤用户的非法输入和多语言转换,这里不展开讲解。因为一旦我们掌握了标签模板的用法后,以后就可以好好利用它的这个特性,再根据自己的需求要来实现各种功能了。

ES6新的String函数

repeat( )函数:将目标字符串重复N次,返回一个新的字符串,不影响目标字符串。

var name1 = "王汉炎"; //目标字符串
var name2 = name1.repeat(3);
//变量name1被重复三次;

console.log(name1); 
//结果:王汉炎

console.log(name2);
//结果:王汉炎王汉炎王汉炎

includes( )函数:判断字符串中是否含有指定的子字符串,返回true表示含有和false表示未含有。第二个参数选填,表示开始搜索的位置。

var name = "王汉炎";//目标字符串
name.includes('炎'); 
//true, 含有

name.includes('web'); 
//false, 不含有

name.includes('王',1); 
//false, 从第2个字符开始搜索, 不含有

传统的做法我们可以借助indexOf( )函数来实现,如果含有指定的字符串,indexOf( )函数就会子字符串首次出现的位置,不含有,则返回-1。我们通过返回值是否为-1来判断字符串中是否含有指定的子字符串,但是,我们现在可以用includes( )函数代替indexOf( )函数,因为它的返回值更直观(true或false),况且我们并不关心子字符串出现的位置。

startsWith( )函数:判断指定的子字符串是否出现在目标字符串的开头位置,第二个参数选填,表示开始搜索的位置。

var name = "王汉炎"; //目标字符串

name.startsWith('王'); 
//true,出现在开头位置

name.startsWith('汉'); 
//false,不是在开头位置

name.startsWith('汉',1); 
//true,从第2个字符开始

endsWith( )函数:判断子字符串是否出现在目标字符串的尾部位置,第二个参数选填,表示针对前N个字符。

var name = "我就是王汉炎";//目标字符串

name.endsWith('我');
//false,不在尾部位置

name.endsWith('炎'); 
//true,在尾部位置

name.endsWith('炎',5); 
//false,只针对前5个字符

name.endsWith('炎',6);
//true,针对前6个字符

javascript中,一个字符固定为2个字节,对于那些需要4个字节存储的字符,javascript会认为它是两个字符,此时它的字符长度length为2。如字符:"?",就是一个需要4个字节存储,length为2的字符。这会有什么问题呢?对于4字节的字符, javascript无法正确读取字符,我们来试试看。

var str1 = "前端";
var str2 = "?";

str1.length; //length为2
str2.length; //length为2

str1.charAt(0); //前
str1.charAt(1); //端

str2.charAt(0); //'�'
str2.charAt(1); //'�'

可以看到,str1和str2的长度length都是2,因为字符:"?"是一个4字节的字符,使用charAt函数(charAt() 方法可返回指定位置的字符)能正确读取字符串str1的字符,但无法正确读取4个字节的字符,此时返回结果出现了乱码。

但是,如果我们使用ES6给我们提供的codePointAt( )函数,就可以处理这种4个字节的字符了,我们来看看怎么使用

var str = "?";
str.codePointAt(); //结果:134071

对于这个长度length为2字符:"?",codePointAt( )方法可以正确地识别出它是个4个字节的字符,并且能正确地返回它的码点的十进制数:134071,这个数字抓换成16进制就是20bb7,对应的Unicode编码则是\u20bb7。

String.fromCodePoint( )函数:函数的参数是一个字符对应的码点,返回的结果就是对应的字符,哪怕这个字符是一个4字节的字符,也能正确实现。

正好可以利用上面得到的10进制数字134071反推一下。

String.fromCodePoint(134071); //结果:"?"
String.raw( )函数;看函数名raw是未加工的的意思,正如这个函数的作用一样:返回字符串最原始的样貌,即使字符串中含有转义符,它都视而不见,直接输出。

console.log(`hello\nworld`);
//输出:hello
world
 console.log(String.raw`hello\nwolrd`);
//输出:hello\nwolrd

总结:ES6给字符串带来了很多实用性的扩展:模板字符串,标签模板,repeat函数、includes函数,startsWith函数,endsWith函数,codePointAt函数,String.fromCodePoint函数,String.raw函数。

以上这篇es6 字符串String的扩展(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
div模拟选择框示例代码
Nov 03 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
移动端js图片查看器
Nov 17 Javascript
js实现交通灯效果
Jan 13 Javascript
JS中的phototype详解
Feb 04 Javascript
jquery事件与绑定事件
Mar 16 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
浅谈pc端rem字体设置的问题
Aug 03 #Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 #Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 #Javascript
老生常谈js数据类型
Aug 03 #Javascript
详解JavaScript按概率随机生成事件
Aug 02 #Javascript
angular中的cookie读写方法
Aug 02 #Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 #Javascript
You might like
一段php加密解密的代码
2006/10/09 PHP
elgg 获取文件图标地址的方法
2010/03/20 PHP
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
javascript parseInt与Number函数的区别
2010/01/21 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
跟老齐学Python之有点简约的元组
2014/09/24 Python
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
python如何查看安装了的模块
2020/06/23 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
营销与策划应届生求职信
2013/11/04 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
民事代理词范文
2015/05/25 职场文书
现实表现证明材料
2015/06/19 职场文书