标签： javascript es6
字符串新增特性
- 新增二个方法 - startsWith/endsWith
- 字符串模板 - 反单引号的应用
startsWith
判断字符串以是否以某某开头，返回一个布尔值
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>startsWith</title>
<script type="text/javascript">
//判断一个网址的类型
function judgeUrl(str){
if(str.startsWith('http://')){
console.log(str+':这是个普通网址');
}else if(str.startsWith('https://')){
console.log(str+':这是个加密网址');
}else if(str.startsWith('git://')){
console.log(str+':这是个git地址');
}else if(str.startsWith('svn://')){
console.log(str+':这是个SVN地址');
}else{
console.log('其它!');
}
}
</script>
</head>
<body>
<button onclick="judgeUrl('http://www.baidu.com');">http://www.baidu.com</button>
<button onclick="judgeUrl('https://www.baidu.com');">https://www.baidu.com</button>
<button onclick="judgeUrl('git://www.baidu.com');">git://www.baidu.com</button>
<button onclick="judgeUrl('svn://www.baidu.com');">svn://www.baidu.com</button>
<button onclick="judgeUrl('htdfdfdfdf');">http://www.baidu.com</button>
</body>
</html>
endsWith
判断字符串以是否以某某结束，返回一个布尔值
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>endsWith</title>
<script type="text/javascript">
//判断一个网址的类型
function judgeUrl(str){
if(str.endsWith('.jpg')){
console.log(str+':这是jpeg格式图片');
}else if(str.endsWith('.png')){
console.log(str+':这是png格式图片');
}else if(str.endsWith('.gif')){
console.log(str+':这是gif格式图片');
}else if(str.endsWith('.bmp')){
console.log(str+':这是bmp格式图片');
}else{
console.log('其它!');
}
}
</script>
</head>
<body>
<button onclick="judgeUrl('aaa.jpg');">aaa.jpg</button>
<button onclick="judgeUrl('aaa.png');">aaa.png</button>
<button onclick="judgeUrl('aaa.gif');">aaa.gif</button>
<button onclick="judgeUrl('aaa.bmp');">aaa.bmp</button>
<button onclick="judgeUrl('aaa.doc');">aaa.doc</button>
</body>
</html>
字符串模板
- 可以直接把变量插入到字符串里面
- 折行不必做特殊处理
示例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>字符串模板</title>
</head>
<body>
<h3>字符串方式</h3>
<div id="test1"></div>
<hr />
<h3>方式</h3>
<div id="test2"></div>
<hr />
<h3>ES6字符串模板方式</h3>
<div id="test3"></div>
<script>
var title = "这是标题";
var content = "这里是内容，应该放的内容!!";
//第一种字符串拼接方法
var htmlStr0 = "<div>"+
"<h4>"+title+"</h4>"+
"<p>"+content+"</p>"+
"</div>";
//第二种字符串拼接方法
var htmlStr1 = "<div>
<h4>"+title+"</h4>
<p>"+content+"</p>
</div>";
//es6字符串模板方法
var htmlStr2 = `<div>
<h4>${title}</h4>
<p>${content}</p>
</div>`;
document.getElementById('test1').innerHTML = htmlStr0;
document.getElementById('test2').innerHTML = htmlStr1;
document.getElementById('test3').innerHTML = htmlStr2;
</script>
</script>
</script>
</body>
</html>