粗看ES6之字符串

時間 2019-12-13

原文原文鏈接

標籤： javascript es6javascript

字符串新增特性

新增二個方法 - startsWith/endsWith
字符串模板 - 反單引號的應用

startsWith

判斷字符串以是否以某某開頭，返回一個布爾值
示例代碼以下：html

<!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>

測試地址java

endsWith

判斷字符串以是否以某某結束，返回一個布爾值
示例代碼以下：git

<!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>

測試地址es6

字符串模板

能夠直接把變量插入到字符串裏面
折行沒必要作特殊處理

示例代碼以下:svn

<!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>

測試地址測試

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。