DailyJS

Multiline strings in JavaScript

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

ES6 hacks

Multiline strings in JavaScript

Posted by Alex R. Young on .
Featured

ES6 hacks

Multiline strings in JavaScript

Posted by Alex R. Young on .

Multiline (GitHub: sindresorhus / multiline, License: MIT, npm: multiline) by Sindre Sorhus is a clever hack that allows you to write multiline strings by using a callback to wrap around a comment:

var str = multiline(function(){/*  
<!doctype html>  
<html>  
    <body>
        <h1>❤ unicorns</h1>
    </body>
</html>  
*/});

This works by calling .toString() on the callback, then running a regular expression to extract the comment: /\/\*!?(?:\@preserve)?\s*(?:\r\n|\n)([\s\S]*?)(?:\r\n|\n)\s*\*\//.

Although this is a hack, I hadn't thought about it before. Sindre notes that this has a performance impact, but that sometimes it might be worth writing things this way for the added clarity it brings.

EcmaScript 6 will introduce template strings, which can be used for multiline strings and interpolation with {% raw %}${}{% endraw %}:

A template string uses back ticks instead of double quotes or single quotes. The template string can contain place holders, which use the {% raw %}${ }{% endraw %} syntax. The value of the expressions in the place holders as well as the text between them gets passed to a function. This function is determined on the expression before the template string. If there is no expression before the template string the default template string is used.