一、字符串
相对于ES6之前的字符串,ES6有以下改变:
1、字符串新增了“startsWith”和“endsWith”方法
(1)startsWith()方法
该方法会判断该字符串对象是否以某个字符开始;
例如:
let str = "abcd";
alert(str.startsWith("a")+"|"+str.startsWith("a"));
使用startsWith方法判断字符串是否以“a”开头。我们可以用于判断其中开头的内容,例如来校验收到的网址是什么类型的:
<!DOCTYPE html>
<html>
<head>
<title>TEST ES6</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<input id="url" value=""/> <button onclick="doAnalysis()">检测</button>
<div id="answer"></div>
<script>
function doAnalysis(){
let url = document.getElementById("url").value;
let answer = document.getElementById("answer");
if(url.startsWith("http://")){
answer.innerHTML="普通网址";
}else if(url.startsWith("https://")){
answer.innerHTML="加密网址";
}else if(url.startsWith("git://")){
answer.innerHTML="git地址";
}else if(url.startsWith("svn://")){
answer.innerHTML="svn网址";
}else{
answer.innerHTML="其他";
}
}
</script>
</body>
</html>
效果:
(2)endsWith()方法
该方法会判断该字符串对象是否以某个字符结尾。这个方法也适用于多个场景,例如根据文件名字符串的后缀,来判断是什么类型的格式,进而进入该格式的处理逻辑中:
let docmentName = "abcd.jpg";
if(docmentName.endsWith(".jpg")||docmentName.endsWith(".png")){
alert("图片文件");
}else if(docmentName.endsWith(".txt")||docmentName.endsWith(".doc")){
alert("文本文件");
}else if(docmentName.endsWith(".mp3")||docmentName.endsWith(".wmv")){
alert("音频文件");
}else if(docmentName.endsWith(".mp4")||docmentName.endsWith(".rmvb")){
alert("视频文件");
}else{
alert("其他");
}
2、字符串模板
我们在定义字符串的时候,主要使用单引号“'”或双引号“"”来定义字符串:
let str1='abc';
let str2="abc";
而在ES6中,我们可以使用反单引号“`”,输入方法:
1、将输入法调整为英文输入法。
2、单击键盘上数字键1左边的按键。
let str=`abc`;
这样一个定义方式,就是字符串模板。那字符串模板有什么用呢?最大的作用就是用于字符串拼接,例如我们在“acd”中间插入一个“b”,在ES6之前的做法是:
let str='b';
let str2='a'+str+'cd';
使用字符串模板,可以这样写:
let str='b';
let str2=`a${str}cd`;
在字符串模板中,使用花括号“${}”包裹需要拼接的变量,就可以直接实现字符串的拼接。效果:
并且普通字符串不能折行,字符串模板可以折行:
let title="标题";
let content="内容";
let str="<div>"+
"<h1>"+title+"</h1>"+
"<p>"+content+"</p>"+
"</div>";
//使用字符串模板:
let str2=`<div>
<h1>${title}</h1>
<p>${content}</p>
</div>`;
效果:
总结:字符串模板可以直接把东西塞到字符串中,并且可以折行。这在我们拼接大段的html字符串的时候十分实用。
参考:深入解读ES6系列视频教程(kaikeba.com提供)
转载请注明出处:https://blog.csdn.net/acmman/article/details/114438007