|
550 | 550 | <div class="title"><b>ECMAScript 6</b> — syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
|
551 | 551 | <div class="code"><span class="keyword">var</span> customer<span class="punctuation"> = </span><span class="punctuation">{</span> name: <span class="literal">"Foo"</span> <span class="punctuation">}</span><span class="semi">;</span>
|
552 | 552 | <span class="keyword">var</span> card<span class="punctuation"> = </span><span class="punctuation">{</span> amount: <span class="literal">7</span><span class="punctuation">,</span> product: <span class="literal">"Bar"</span><span class="punctuation">,</span> unitprice: <span class="literal">42</span> <span class="punctuation">}</span><span class="semi">;</span>
|
553 |
| -message<span class="punctuation"> = </span><span class="literal">`Hello <span class="mark">$<span class="punctuation">{</span>customer<span class="punctuation">.</span>name<span class="punctuation">}</span></span><span class="punctuation">,</span> |
| 553 | +message<span class="punctuation"> = </span><span class="mark"><span class="literal">`</span>Hello <span class="mark">$<span class="punctuation">{</span>customer<span class="punctuation">.</span>name<span class="punctuation">}</span></span><span class="punctuation">,</span> |
554 | 554 | want to buy <span class="mark">$<span class="punctuation">{</span>card<span class="punctuation">.</span>amount<span class="punctuation">}</span> $<span class="punctuation">{</span>card<span class="punctuation">.</span>product<span class="punctuation">}</span></span> <span class="keyword">for</span>
|
555 |
| -a total <span class="keyword">of</span> <span class="mark">$<span class="punctuation">{</span>card<span class="punctuation">.</span>amount <span class="punctuation">*</span> card<span class="punctuation">.</span>unitprice<span class="punctuation">}</span></span> bucks?`</span><span class="semi">;</span> |
| 555 | +a total <span class="keyword">of</span> <span class="mark">$<span class="punctuation">{</span>card<span class="punctuation">.</span>amount <span class="punctuation">*</span> card<span class="punctuation">.</span>unitprice<span class="punctuation">}</span></span> bucks?<span class="mark">`</span></span><span class="semi">;</span> |
556 | 556 | </div>
|
557 | 557 | <i class="icon fa fa-circle"></i>
|
558 | 558 | <i class="icon fa fa-check-circle"></i>
|
|
561 | 561 | <div class="title"><b>ECMAScript 5</b> — syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
|
562 | 562 | <div class="code"><span class="keyword">var</span> customer<span class="punctuation"> = </span><span class="punctuation">{</span> name: <span class="literal">"Foo"</span> <span class="punctuation">}</span><span class="semi">;</span>
|
563 | 563 | <span class="keyword">var</span> card<span class="punctuation"> = </span><span class="punctuation">{</span> amount: <span class="literal">7</span><span class="punctuation">,</span> product: <span class="literal">"Bar"</span><span class="punctuation">,</span> unitprice: <span class="literal">42</span> <span class="punctuation">}</span><span class="semi">;</span>
|
564 |
| -message<span class="punctuation"> = </span><span class="literal">"Hello "</span><span class="mark"> <span class="punctuation">+</span> customer<span class="punctuation">.</span>name <span class="punctuation">+</span> </span><span class="literal">"<span class="punctuation">,</span>\n"</span> <span class="punctuation">+</span> |
| 564 | +message<span class="punctuation"> = </span><span class="mark"><span class="literal">"</span>Hello "</span><span class="mark"> <span class="punctuation">+</span> customer<span class="punctuation">.</span>name <span class="punctuation">+</span> </span><span class="literal">"<span class="punctuation">,</span>\n"</span> <span class="punctuation">+</span> |
565 | 565 | <span class="literal">"want to buy "</span><span class="mark"> <span class="punctuation">+</span> card<span class="punctuation">.</span>amount <span class="punctuation">+</span> </span><span class="literal">" "</span><span class="mark"> <span class="punctuation">+</span> card<span class="punctuation">.</span>product <span class="punctuation">+</span> </span><span class="literal">" <span class="keyword">for</span>\n"</span> <span class="punctuation">+</span>
|
566 |
| -<span class="literal">"a total <span class="keyword">of</span> "</span><span class="mark"> <span class="punctuation">+</span> <span class="punctuation">(</span>card<span class="punctuation">.</span>amount <span class="punctuation">*</span> card<span class="punctuation">.</span>unitprice<span class="punctuation">)</span> <span class="punctuation">+</span> </span><span class="literal">" bucks?"</span><span class="semi">;</span></div> |
| 566 | +<span class="literal">"a total <span class="keyword">of</span> "</span><span class="mark"> <span class="punctuation">+</span> <span class="punctuation">(</span>card<span class="punctuation">.</span>amount <span class="punctuation">*</span> card<span class="punctuation">.</span>unitprice<span class="punctuation">)</span> <span class="punctuation">+</span> </span><span class="literal">" bucks?<span class="mark">"</span></span><span class="semi">;</span></div> |
567 | 567 | <i class="icon fa fa-circle"></i>
|
568 | 568 | <i class="icon fa fa-times-circle"></i>
|
569 | 569 | </div>
|
|
573 | 573 | <div class="desc">Flexible expression interpolation for arbitrary methods.</div>
|
574 | 574 | <div class="js es6">
|
575 | 575 | <div class="title"><b>ECMAScript 6</b> — syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
|
576 |
| - <div class="code">get<span class="literal">`http://example<span class="punctuation">.</span>com/foo?bar=<span class="mark">$<span class="punctuation">{</span></span>bar <span class="punctuation">+</span> baz<span class="mark"><span class="punctuation">}</span></span><span class="punctuation"><span class="punctuation">&</span></span>quux=<span class="mark">$<span class="punctuation">{</span></span>quux<span class="mark"><span class="punctuation">}</span></span>`</span><span class="semi">;</span> |
| 576 | + <div class="code">get<span class="mark"><span class="literal">`</span>http://example<span class="punctuation">.</span>com/foo?bar=<span class="mark">$<span class="punctuation">{</span></span>bar <span class="punctuation">+</span> baz<span class="mark"><span class="punctuation">}</span></span><span class="punctuation"><span class="punctuation">&</span></span>quux=<span class="mark">$<span class="punctuation">{</span></span>quux<span class="mark"><span class="punctuation">}</span>`</span></span><span class="semi">;</span> |
577 | 577 | </div>
|
578 | 578 | <i class="icon fa fa-circle"></i>
|
579 | 579 | <i class="icon fa fa-check-circle"></i>
|
|
597 | 597 | strings<span class="punctuation">.</span>raw<span class="punctuation">[</span><span class="literal">1</span><span class="punctuation">]</span> <span class="punctuation">===</span> <span class="literal">"bar"</span><span class="semi">;</span>
|
598 | 598 | values<span class="punctuation">[</span><span class="literal">0</span><span class="punctuation">]</span> <span class="punctuation">===</span> <span class="literal">42</span><span class="semi">;</span>
|
599 | 599 | <span class="punctuation">}</span>
|
600 |
| -quux <span class="literal">`foo<span class="mark">\n</span>$<span class="punctuation">{</span> 42 <span class="punctuation">}</span>bar`</span> |
| 600 | +quux <span class="mark"><span class="literal">`</span>foo<span class="mark">\n</span>$<span class="punctuation">{</span> 42 <span class="punctuation">}</span>bar<span class="mark">`</span></span> |
601 | 601 |
|
602 |
| -String<span class="punctuation">.</span>raw <span class="literal">`foo<span class="mark">\n</span>$<span class="punctuation">{</span> 42 <span class="punctuation">}</span>bar`</span> <span class="punctuation">===</span> <span class="literal">"foo<span class="mark">\\n</span>42bar"</span><span class="semi">;</span> |
| 602 | +String<span class="punctuation">.</span>raw <span class="mark"><span class="literal">`</span>foo<span class="mark">\n</span>$<span class="punctuation">{</span> 42 <span class="punctuation">}</span>bar<span class="mark">`</span></span> <span class="punctuation">===</span> <span class="literal">"foo<span class="mark">\\n</span>42bar"</span><span class="semi">;</span> |
603 | 603 | </div>
|
604 | 604 | <i class="icon fa fa-circle"></i>
|
605 | 605 | <i class="icon fa fa-check-circle"></i>
|
|
0 commit comments