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 相关文章推荐
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
jqgrid 表格数据导出实例
Nov 21 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 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实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
input 高级限制级用法
2009/03/26 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
Python通过websocket与js客户端通信示例分析
2014/06/25 Python
Python基于DES算法加密解密实例
2015/06/03 Python
详解python的四种内置数据结构
2019/03/19 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
销售简历自我评价
2014/01/24 职场文书
党员批评与自我批评
2014/02/12 职场文书
国庆节标语大全
2014/10/08 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
王亚平太空授课观后感
2015/06/12 职场文书
大学生读书笔记大全
2015/07/01 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
导游词之峨眉山
2019/12/16 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python