Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
xw5pro
0viewers