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 相关文章推荐
Js callBack 返回前一页的js方法
Nov 30 Javascript
几个有趣的Javascript Hack
Jul 24 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
$.extend 的一个小问题
Jun 18 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
Oct 16 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
解决webpack多页面内存溢出的方法示例
Oct 08 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
浅谈vue中resetFields()使用注意事项
Aug 12 Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 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 基本语法格式
2009/12/15 PHP
PHP管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
js Flash插入函数免激活代码
2009/03/31 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
vue中监听返回键问题
2019/08/28 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
Python脚本实现下载合并SAE日志
2015/02/10 Python
简单讲解Python中的闭包
2015/08/11 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
python实现快递价格查询系统
2020/03/03 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
原装进口全世界:天猫国际
2016/08/03 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
班组安全员工作职责
2014/02/01 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
银行员工考核评语
2014/12/31 职场文书
金砖之国观后感
2015/06/11 职场文书
会议主持词结束语
2015/07/03 职场文书
2016年教师新年寄语
2015/08/18 职场文书
五一放假通知怎么写
2015/08/18 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书