[ES6] 11. String Templates

ECMAscript 6 lets us use string templates to gain a lot more control over strings in JavaScript.

var salutation = "Hello";
var place = "New York";
var greeting =`
    ${salutation}, I
am    IN

    ${place}

CITY
`;

console.log(greeting);

/**

    Hello, I
am    IN

    New York

CITY

*/

you can do expressions:

var x = 1;
var y = 2;

var sum = `${x} + ${y} = ${ x + y }`;
console.log(sum);  // 1 + 2 = 3

basic introduction to tagging these string templates:

var message = `It's ${new Date().getHours()}, I'm studying`;
console.log(message);  // It's 13, I'm studying

Now make those string as variable:

<!DOCTYPE html>
<html>
  <head>
    <script data-require="traceur@*" data-semver="0.0.0-20140302" src="https://traceur-compiler.googlecode.com/git/bin/traceur.js"></script>
    <script>
     traceur.options.experimental = true;
    </script>
    <script data-require="traceur@*" data-semver="0.0.0-20140302" src="https://traceur-compiler.googlecode.com/git/src/bootstrap.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
      <script type="module">
        function tag(strings, ...values){
            if(values[0] < 20){
                values[1] = "awake";
            }
            
            return `${strings[0]}${values[0]}${strings[1]}${values[1]}`;
        }
        
        var message = tag `It's ${new Date().getHours()}, I'am ${""}`;
        console.log(message);
      </script>
  </body>
</html>

posted @ 2014-11-22 19:19 Zhentiw 阅读(220) 评论(0) 编辑收藏举报

刷新页面返回顶部

（评论功能已被禁用）

公告

昵称： Zhentiw
园龄： 13年2个月
粉丝： 41
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

Answer1215

[ES6] 11. String Templates

公告

常用链接

最新随笔

积分与排名

随笔分类

随笔档案

阅读排行榜

评论排行榜