From 555e47dbb92862305c8949d1a1ed0149cb0cce02 Mon Sep 17 00:00:00 2001 From: Gregory Huczynski Date: Sun, 27 Nov 2016 03:28:43 +0000 Subject: [PATCH] Docs for tagged template literals (#4372) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Correct tagged template literal test. Should use Coffeescript form of interpolated strings, not Javascript! * First pass at docs for tagged template literals. * Correct alerted variable. * Add note re checking runtime for tagged template literals * Fixed broken example. * Consistent style * Clarify that CoffeeScript isn’t handling the tagged template literal, the runtime is; fix CoffeeScript spelling * Collapse notes about generator functions and tagged template literals into the same sentence * Make tagged template literals example into a function * Make text less clunky. * More clarity on what CoffeeScript is doing versus what the runtime is doing, and emphasize runtimes vs Babel/Traceur --- .../examples/tagged_template_literals.coffee | 8 +++++ documentation/index.html.js | 33 ++++++++++++++++--- test/tagged_template_literals.coffee | 2 +- 3 files changed, 38 insertions(+), 5 deletions(-) create mode 100644 documentation/examples/tagged_template_literals.coffee diff --git a/documentation/examples/tagged_template_literals.coffee b/documentation/examples/tagged_template_literals.coffee new file mode 100644 index 0000000000..a5a2edcb1f --- /dev/null +++ b/documentation/examples/tagged_template_literals.coffee @@ -0,0 +1,8 @@ +upperCaseExpr = (textParts, expressions...) -> + textParts.reduce (text, textPart, i) -> + text + expressions[i - 1].toUpperCase() + textPart + +greet = (name, adjective) -> + upperCaseExpr""" + Hi #{name}. You look #{adjective}! + """ diff --git a/documentation/index.html.js b/documentation/index.html.js index 4317c6e46a..d163584a47 100644 --- a/documentation/index.html.js +++ b/documentation/index.html.js @@ -41,6 +41,7 @@ Switch and Try/Catch Chained Comparisons String Interpolation, Block Strings, and Block Comments + Tagged Template Literals Block Regular Expressions Modules Cake, and Cakefiles @@ -114,10 +115,12 @@

The CoffeeScript compiler goes to great lengths to generate output JavaScript that runs in every JavaScript runtime, but there are exceptions. Use - generator functions only if you know that your - target - runtimes can support them. If you use modules, you - will need to use an additional tool to resolve them. + generator functions or + tagged template literals only if you + know that your target + runtimes can support them. If you use modules, + you will need to use an additional tool to resolve + them.

@@ -987,6 +990,28 @@ Block

<%= codeFor('block_comment') %> +

+ + Tagged Template Literals + CoffeeScript supports + ES2015 tagged template literals, + which enable customized string interpolation. If you immediately prefix a string + with a function name (no space between the two), CoffeeScript will output this + 'function plus string' combination as an ES2015 tagged template literal, which will + behave accordingly: + the function is called, with the parameters being the input text and expression parts + that make up the interpolated string. The function can then assemble these parts + into an output string, providing custom string interpolation. +

+

+ Be aware that the CoffeeScript compiler is outputting ES2015 syntax for this feature, + so your target JavaScript runtime(s) must support this syntax for your code to work; + or you could use tools like Babel or + Traceur Compiler to convert + this ES2015 syntax into compatible JavaScript. +

+ <%= codeFor('tagged_template_literals', 'greet("greg", "awesome")') %> +

Block Regular Expressions diff --git a/test/tagged_template_literals.coffee b/test/tagged_template_literals.coffee index 0efa855822..6ecacb0f73 100644 --- a/test/tagged_template_literals.coffee +++ b/test/tagged_template_literals.coffee @@ -36,7 +36,7 @@ test "tagged template literal for html templating", -> """, html"""

- Hi ${state.name}. You're looking ${state.adjective}! + Hi #{state.name}. You're looking #{state.adjective}!

"""