ES6中的字符串API.md
ES6中的字符串扩展与数组扩展
#字符串扩展
includes
用于判断一个字符串是否包含在另一个字符串中,根据情况返回 true 或 false
语法:str.includes(searchString[, position])
searchString——要在此字符串中搜索的字符串;position——可选。从当前字符串的哪个索引位置开始搜寻子字符串,默认值为0
let str = 'to be, or not to be, that is a question';
console.log(str.includes('not to be'));//true
console.log(str.includes('not to be', 11));//false
该方法区分大小写
let str = 'UpperCase and LowerCase';
console.log(str.includes('upperCase'));//false
console.log(str.includes('UpperCase'));//true
startsWith
用来判断当前字符串是否是以参数给定的子字符串“开头”的,根据判断结果返回true/false
语法:str.startsWith(searchString [, position])
searchString——要搜索的子字符串;position——在 str 中搜索 searchString 的开始位置,默认值为 0,也就是真正的字符串开头处
var str = "To be, or not to be, that is the question.";
console.log(str.startsWith("To be")); // true
console.log(str.startsWith("not to be")); // false
console.log(str.startsWith("not to be", 10)); // true
该方法大小写敏感
endsWith
用来判断当前字符串是否是以参数给定的子字符串“结尾”的,根据判断结果返回true/false
语法:str.endsWith(searchString [, position])
不包含position位置的字符,如下:
var str = "To be, or not to be, that is the question.";
console.log(str.endsWith("be", 19)); // true,不包含19处的字符','
console.log(str.endsWith("be", 18)); // false
repeat
语法:str.repeat(count)
count只能为[0,+无穷)
重复原字符串
var str = 'abc'.repeat(3);//"abcabcabc"
var str1 = 'abc'.repeat(0);//""
模板字符串
######语法及简单使用:
语法:
- 模板字符串使用‘``’来代替普通字符串中的双引号或单引号
- 模板字符串使用‘${expression}’来插值
简单使用:
let obj1 = '国家';
let obj2 = '我们';
let str = `${obj1}是伟大的,${obj2}热爱她`;
console.log(str);//"国家是伟大的,我们热爱她"
用‘’…’’包围的一组字符串会被解释为模板字符串,其中‘${expression}会被立即解析求值’
模板字符串能更方便创建多行字符串
var str = '纸上得来终觉浅绝知此事要躬行';//由于会自动加分号,因此此种构建多行字符串的方式会报错
var str = '纸上得来终觉浅\n\绝知此事要躬行';//此种换行方式成功
但是有了模板字符串,则
var str = `纸上得来终觉浅绝知此事要躬行`;//在书写代码时直接换行即可
template1.png
更常用的,我么可以用它来书写html结构
let div = document.getElementById('div');
let html = `<ul><li><div><span>span1</span></div></li><li><div><span>span2</span></div></li></ul>`;
div.innerHTML = html;
在书写模板字符串代码时,书写在其中的换行会被保留在模板字符串中。所以能用模板字符串语法创建多行字符串
转义
如果你要在模板字符串中使用‘``’则需要进行转义
let str = `qwe\`nihao\`kn`;
当然,像其他时候一样,使用‘\’等字符也要转义
‘${expression}’中的expression
expression只要是一个合法的表达式就行
let a = undefined;
let b = null;
let c = [1,2,3];
let d = {name:'德洛丽丝'};let e = name => name;let str = `${a}与${b}与${c}与${d}与${e('伯纳德')}与${3%5}`;
//"undefined与null与1,2,3与[object Object]与伯纳德与3"
######带标签的模板字符串
带标签的模板字符串是指——模板字符串前面有一个函数的引用
let obj1 = '大家';
let obj2 = '贝尔格里尔斯';function test(){};let str = test`${obj1}好!我是${obj2}`;
//模板字符串前面有一个函数的引用——test,这便是带标签的模板字符串
那么,带标签的模板字符串是怎么运行的呢?
function foo(strings, ...values) {console.log( strings );//["Everything is ", "!"]console.log( values );//["awesome"]
}var desc = "awesome";foo`Everything is ${desc}!`;
在解析带标签的模板字符串时,‘...’可以看成一个分隔符,而函数中的第一个形参接受由‘{...}’可以看成一个分隔符,而函数中的第一个形参接受由‘...’可以看成一个分隔符,而函数中的第一个形参接受由‘{…}’分隔开的字符串组成的数组(如上述‘...’将字符串分割为了"Everythingis"与"!"两部分,而strings正是由这两个字符串组成的数组);函数的第二个参数接受,由所有‘{...}’将字符串分割为了"Everything is "与"!"两部分,而strings正是由这两个字符串组成的数组);函数的第二个参数接受,由所有‘...’将字符串分割为了"Everythingis"与"!"两部分,而strings正是由这两个字符串组成的数组);函数的第二个参数接受,由所有‘{…}’的运算结果(只不过这儿用了rest运算符,固结果被收集为了一个数组)
再看一个例子
function foo(strings, ...values) {console.log( strings );//["Thanks for your purchase, ", "! Your product cost was ", ", which with taxcomes out to ", "ok!"]console.log( values );//["Jack", 11, 22]
}let name = "Jack";
let amt1 = 11;
let amt2 = 22;foo`Thanks for your purchase, ${name}! Your product cost was ${amt1}, which with taxcomes out to ${amt2}ok!`;
#数组扩展
Array.of(…)
Array.of(…)取代了Array(…),用于创建一个数组
为什么要用of而不用Array了呢?——因为,Array(…) 构造器有一个众所周知的陷阱,就是如果只传入一个参数,并且这个参数是数字的话,那么不会构造一个值为这个数字的单个元素的数组,而是构造一个空数组,其length 属性为这个数字
而of就没有这种特殊行为
let arr1 = Array.of(5);
let arr2 = new Array(5);console.log(arr1, arr2);[5] [empty x 5]
Array.from(…)
该方法用于将类数组转换为数组。使我们更方便的使用数组中的方法
let obj = {0: '德洛丽丝',1: '伯纳德',2: '黑尔',length: 3
}
let arr = Array.from(obj);//["德洛丽丝", "伯纳德", "黑尔"]
注意:
var arrLike = {length: 4,2: "foo"
};
Array.from( arrLike );//[undefined, undefined, "foo", undefined]
由此可见,from方法的本质就是循环遍历类数组
除了通过更标准的from方法将类数组转换为数组之外。还有几种野生的方式:
- 通过数组中的slice方法
let obj = {0: '德洛丽丝',1: '伯纳德',2: '黑尔',length: 3
}
let arr = Array.prototype.slice.call(obj);//["德洛丽丝", "伯纳德", "黑尔"]
注意:此时slice中不传任何参数
######Array.prototype.find()
语法:arr.find(callback[, thisArg])
callback:
在数组每一项上执行的函数,接收 3 个参数:
element(当前遍历到的元素)、index(当前遍历到的元素的索引)、array(数组本身)
thisArg:
用于改变callback中的this指向
返回值:
find 方法对数组中的每一项元素执行一次 callback 函数,直至有一个 callback 返回真值。当找到了这样一个元素后,该方法会立即返回这个元素的值,否则返回 undefined。(一旦callback返回了true,那么就会停止对数组的遍历)
let arr = [{name: '德洛丽丝',age: 30},{name: '伯纳德',age: 32},{name: '黑尔',age: 30}
];
let result = arr.find((item) => {return item.name === '伯纳德';
});
Array.prototype.findIndex()
语法:arr.findIndex(callback[, thisArg])
callback:
在数组每一项上执行的函数,接收 3 个参数:
element(当前遍历到的元素)、index(当前遍历到的元素的索引)、array(数组本身)
thisArg:
用于改变callback中的this指向
返回值:
findIndex方法对数组中的每个元素执行一次callback函数,直到找到一个callback函数返回真值,如果找到这样的元素,findIndex会立即返回该元素的索引。如果没有符合要求的元素,或者数组的length为0,则findIndex返回-1
Array.prototype.fill()
语法:arr.fill(value[, start[, end]])
value
用来填充数组元素的值
start 可选
起始索引,默认值为0
end 可选
终止索引,默认值为 this.length
返回值:
fill方法用value填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。然后返回更改后的原数组(该方法会改变原数组)
当start/end为负数时,会被自动计算为length+start/end
[1, 2, 3].fill(4); // [4, 4, 4]
[1, 2, 3].fill(4, 1); // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2); // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3); // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2); // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5); // [1, 2, 3]
Array(3).fill(4); // [4, 4, 4]
[].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3}// Objects by reference.
var arr = Array(3).fill({}) // [{}, {}, {}];
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]注意:因为填充的是同一个引用值,因此一改全改
ES6中的字符串API.md相关推荐
- ES6中新增字符串方法,字符串模板
ES6中新增字符串方法,字符串模板 多了两个新方法 startsWith endsWith 返回的是一个Boolean值 let str='git://www.baidu.com/2123123';i ...
- js中delete是es6_js和es6中的字符串方法总结
1.substring(start,end) -> 截取字符串 用法: 1.substring(start,end) -> 用数学表达式表达区间的话就是截取[start,end); 2.s ...
- C语言中常见字符串API详解
以下均为笔记,草率见谅,首先介绍下在字符串章节所用的函数,再介绍几个常见的api malloc 函数原型:void *malloc(size_t size) C库函数void *malloc(size ...
- ES6中PadStart方法
ES6中的字符串新方法padStart()来填充字符串 1.从开始填充: String.Prototype.padStart(maxLength,fillString='')//maxLength : ...
- [译]JavaScript:ES6中的模板字符串简介
原文:http://tc39wiki.calculist.org/es6/template-strings/ ES6中的模板字符串(template string)是一种能在字符串文本中内嵌表达式的字 ...
- es6字符串添加html标签,JavaScript_详解JavaScript ES6中的模板字符串,在 ES6 中引入了一种新的字符 - phpStudy...
详解JavaScript ES6中的模板字符串 在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是 ...
- js模板字符串自定义类名_详解JavaScript ES6中的模板字符串
这篇文章主要介绍了详解JavaScript ES6中的模板字符串,JS的ES6版本带来诸多简洁化方面的重大改进,需要的朋友可以参考下 在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用 ...
- ES6中字符串和数组新增的方法
ES6中字符串和数组新增的方法 一.字符串中新增的方法 1.模板字符串 (表达式.函数的调用.变量) 2.repeat(次数)函数 : 将目标字符串重复N次,返回一个新的字符串,不影响目标字符串 3. ...
- [译] ES6+ 中的 JavaScript 工厂函数(第八部分)
本文讲的是[译] ES6+ 中的 JavaScript 工厂函数(第八部分), 原文地址:JavaScript Factory Functions with ES6+ 原文作者:Eric Elliot ...
最新文章
- VadR发布WebVR分析工具,为开发者提供用户数据分析
- Oracle 表及表空间(一)
- 64. Minimum Path Sum
- 如何搭建socks5和ss节点_redis cluster搭建实践(非常详细,值得收藏)
- 零基础入门Python3-列表list详解
- es 基本API操作使用
- python立体匹配误匹配率_立体匹配算法(Stereo Matching)及其在OpenCV中的应用
- AcWing 1813. 方块游戏(暴力枚举)
- R语言作图之ggplot2初识(1)
- 如何在C#中生成与PHP一样的MD5 Hash Code
- 最流行的六大数据模型工具
- android电容触摸屏的驱动及其上层工作原理,电容触摸屏驱动原理
- 1194. 锦标赛优胜者
- Tips_linux
- Spring Boot任务管理
- 《郭论》郭德纲/著 读后得2021-02-22
- 如何将ppt批量转换成pdf?
- Laragon 添加MongoDB服务
- Unity3D中制作全景图片
- OpenCV 图像无法显示 (python)
热门文章
- PP生产计划-Routing工艺路线
- html5前端开发框架模板,HTML5中50个免费的Bootstrap前端框架模板
- 相机成像---世界坐标系、相机坐标系、图像坐标系和像素坐标系之间的转换关系
- 柳岩清晨晒素颜照称拿去辟邪 网友称吓人没认出来
- 你告诉我,读书没有用
- 运筹学 知识点总结 (七)
- 淘宝店铺涨价如何才能把对店铺的影响降低到最低,涨价小技巧分享
- C语言论坛系统[2023-01-03]
- Python:设置不显示Using TensorFlow backend及FutureWarning: Passing (type, 1) or ‘1type‘ as a synonym of typ
- 【343天】我爱刷题系列102(2018.01.14)