【JavaScript的ES6语法】3、ES6语法学习（字符串）

一、字符串

相对于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