粗看ES6之字符串

Posted !win !

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了粗看ES6之字符串相关的知识,希望对你有一定的参考价值。


字符串新增特性

  1. 新增二个方法 - startsWith/endsWith
  2. 字符串模板 - 反单引号的应用

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>

测试地址

以上是关于粗看ES6之字符串的主要内容,如果未能解决你的问题,请参考以下文章

粗看ES6之变量

javascript es6新增语法之`${}`

30秒就能看懂的JavaScript 代码片段

ES6 之 let const

ES6新特性之模板字符串

vue2.0 代码功能片段