psychology dector

In this blog post, we look at problems that arise when template literals contain whitespace: Breaking up long lines Dedenting content Joining Arrays Indenting inserted content I’m using the library common-tags by Declan de Wet (with “useful template literal tags for dealing with strings in ES6”) to demonstrate solutions for some of these problems. Breaking up long lines Occasionally, you have long lines that you want to break up. common-tag’s tag function oneLine lets you do that: console.log(oneLine` a single line with many words `); // a single line with many words Dedenting content Template literals let you embed multi-line text content inside JavaScript. The main challenge is that the text must both have proper indentation and fit nicely into its JavaScript surroundings: function foo() { console.log(`<ul> <li>first</li> <li>second</li> </ul>`); } This does not look good...

Despite their name, template strings in ECMAScript 6 (ES6) are more like a different kind of function call than a mechanism for defining templates. This blog post explains how you can still use them for HTML templating. It is based on an idea by Claus Reinke . If you are not familiar with ES6 template strings, you may want to consult [2] before reading on. Defining and using a template You define a template as follows. It relies on the template handler html (a function that we’ll look at later). const tmpl = addrs => html` <table> ${addrs.map(addr => html` <tr>$${addr.first}</tr> <tr>$${addr.last}</tr> `)} </table> `; The trick is that the the inside of each substitution ${} can be an arbitrary expression. We use map() to create an array of strings inside the first substitution (which html() turns into the appropriate string). Thanks to arrow functions [3] , the callback of...

Facebook’s React has an optional language extension that enables you to embed HTML inside JavaScript. This extension can make your code more concise, but it also breaks compatibility with the rest of the JavaScript ecosystem. ECMAScript 6 will have template strings [1] , which enable you to implement JSX (or something close to it) inside the language. Jonathan Raphaelson has done so and the result looks as follows. define(function(require) { ... var EchoComponent = React.createClass({ ... render: function() { return jsx` <div> <input ref='input' onChange='${this.handleChange}' defaultValue='${this.state.value}' /> ${this.state.value} </div> `; } }); return function() { ...

ECMAScript 6 template strings [1] give us multi-line raw (backslash has no special meaning) string literals and interpolation. But they can also be tagged, in which case a library can determine the meaning of their content. Steven Levithan has recently given an example of how they could be used for his regular expression library XRegExp . (As an aside, XRegExp is highly recommended if you are working with regular expressions. You get many advanced features, but there is only a small performance penalty – once at creation time – because XRegExp compiles its input to native regular expressions.) Without template strings, you write code such as the following: var parts = '/2012/10/Page.html'.match(XRegExp( '^ # match at start of string only \n' + '/ (?<year> [^/]+ ) # capture top dir name as year \n' + '/ (?<month> [^/]+ ) # capture subdir name as month \n' + '/ (?<title> [^/]+ ) # capture base name as tit...