ES6为字符串添加了遍历接口,使得字符串可以被 for..of
循环遍历
var Str = "hello-world!";
var arr = []
for(let tem of Str){
arr.push(tem)
}
console.log(arr);
//返回 ["h", "e", "l", "l", "0", "-", "w", "o", "r", "l", "d", "!"]
在传统的JavaScript中,输出模板通常这样写(写法比较繁琐)
$("#someID").append(
'There are <b>' + basket.count + '</b>' +
'item in your basket,' +
'<em>' + basket.onSale +
'</em> are on Sale!'
)
ES6
引入了模板字符串来解决这个问题
模板字符串是增强版的字符串,使用 ` 来标识
它可以当做普通字符串来使用,也可以用来定义多行字符串,或者在字符串中嵌入变量
如果使用模板字符串来标识多行字符串,空格和缩进和换行也会保留在输出中
可以通过在字符串最后面添加 trim()方法消除字符串之前和之后的空格和换行
let name = 'frisbee';
let age = 18;
console.log(`my name is ${name},
my age is ${age}`)
//返回如下
my name is frisbee,
my age is 18
在模板字符串中嵌入变量
模板字符串中嵌入变量,需要写在 ${}
中
大括号内可以放入任意的JavaScript表达式, 可以进行运算,以及对象属性的引用,以及函数的调用
let name = '小七';
console.log(`my name is ${name}`); // my name is 小七
console.log(`3 + 5 = ${3 + 5}`) // 3 + 5 = 8
//函数的调用
function fn(){
return 'hello 小琪';
}
console.log(`you can speak ${fn()}`) // you can speak hello 小琪
模板字符串写成函数的返回值
执行这个函数,就相当于执行这个字符串了
let func = (name) => `hello ${name}`;
func("小七"); //hello 小七
定义:将模板字符串紧跟在一个函数名后面,该函数将被调用来处理这个字符串。这被称为标签模板功能
标签函数会根据模板字符串接收多个参数
第一个参数始终为字符串数组,该数组由模板字符串中所有的字符串组成,由模板中插入的变量进行分割
其它的参数由插入的变量组成,每一个变量值都为标签函数的一个参数
//定义一个方法,该方法用来返回传入的实际参数
function func(){
for(let i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
}
//使用三个不同形式的模板字符串来启动标签模板功能
func`hello world!`
// ["hello world!"]
func` hello ${name} world! `
// [" hello ", " world! "]
// frisbee
func`hello ${name} world! ${age}`
// ["hello ", " world! ", ""]
// frisbee
// 18
可以将参数按照原来的顺序拼接回去
//literals存储的是第一个字符串数组,values存储的是所有插入的变量数组
function parseStr(literals,...values){
let output = '';
let index;
for(index=0;index<values.length;index++){
output += literals[index] + values[index]
}
output += literals[index];
console.log(output);
return output;
}
parseStr`hello ${name} world ${age} gogogo`
// hello frisbee world 18 gogogo
判断字符串是否包含某个子字符串
includes():返回布尔值,表示找到了参数字符串
startsWith():返回布尔值,表示参数字符串是否在原字符串头部
endsWith():返回布尔值,表示参数字符串是否在原字符串末尾
let str = "hello-world";
str.includes('hello'); //true
str.startsWith('hel'); //true
str.endsWith('world'); //true
补全字符串长度
padStart():头部补全,包含两个参数,第一个为补全的最大位数,第二个为用来补全的字符串
padEnd():尾部补全,参数同上
var str = '888';
str.padStart(5,'12'); //12888
str.padEnd(5,'00'); //88800
消除头部或者尾部的空格
trimStart():消除字符串头部的空格,换行,table,返回新的字符串,不会修改原字符串
trimEnd():消除字符串尾部的空格,换行,table,返回新的字符串,不会修改原字符串
var str = `
hello kitty
`;
str.trimStart();
// hello kitty 换行
str.trimEnd();
//换行 + table + hello Kitty
重复字符串
repeat():重复字符串,该方法包含一个参数,指定重复字符串的次数
var str = 'hello';
str.repeat(3); //hellohellohello
...
for...of
,可以遍历字符串中的每一个字符原文:https://www.cnblogs.com/mapengfei247/p/11097320.html