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 相关文章推荐
html数组字符串拼接的最快方法
Sep 16 Javascript
精通Javascript系列之数值计算
Jun 07 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
微信小程序 教程之注册程序
Oct 17 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
layui原生表单验证的实例
Sep 09 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
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
php中的动态调用实例分析
2015/01/07 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
自写的一个jQuery圆角插件
2010/10/26 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
详解Vue之事件处理
2020/07/10 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
python验证码识别的示例代码
2017/09/21 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
python中time库的实例使用方法
2019/10/31 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
Python-openCV开运算实例
2020/07/05 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
消防安全责任书
2014/04/14 职场文书
小学校长汇报材料
2014/08/20 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
个人委托书如何写
2014/09/25 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
干部作风建设心得体会
2014/10/22 职场文书
公司出纳岗位职责
2015/03/31 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
html form表单基础入门案例讲解
2021/07/21 HTML / CSS
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技