WingNews logo WingNews GitHub [2]
top | item 8024116

Multiline strings in JavaScript

98 points| mofle | 11 years ago |github.com | reply

68 comments

order
[+] mappum|11 years ago|reply
That's a really smart hack, I didn't realize comments were included in the output of Function#toString. You could do other cool things, e.g. an annotation for type checking:

  function checkType(f) {
    return function(a) {
      var type = f.toString().match(/\/\/(.*)\n/)[1].trim();
      if(type !== typeof(a)) throw new Error('Invalid type');
      return f(a);
    }
  }
  
  var halve = checkType(function(n) {
    // number
    return n / 2;
  });
  
  halve(4); // returns 2
  halve('string'); // emits error
[+] tlrobinson|11 years ago|reply
I didn't realize comments were included in the output of Function#toString

Probably because sometimes they're not, depending on the JavaScript engine (though perhaps all of the major modern browsers do)

[+] igl|11 years ago|reply
Closure Compiler.
[+] adrusi|11 years ago|reply
When I was first really to program I was into hacking javascript to do the crazy things I wanted it to do. I basically did exactly this, albeit with a worse interpolation feature[1]. Don't actually do this please. In the browser, just open up a different <script type="text/plain"> and grab the string from that tag. On the server you can just use a file. Any string that's actually long enough for `["foo", "bar"].join("\n")` to be too cumbersome should be in a separate file, especially if the other way involves a massive hack.

[1]: http://zurb.com/forrst/posts/Javascript_native_multi_line_st...

[+] jonpacker|11 years ago|reply
So you would suggest using external text files to store every SQL/Cypher query that is used in a model-based node app?
[+] wldlyinaccurate|11 years ago|reply
Probably worth pointing out that this won't play nice with most minification utilities unless you don't mind leaving all comments in the output.

I think for this reason I still prefer using Array.prototype.join for multiline strings:

    var str = [
        '<!doctype html>',
        '<html>',
            '<body>',
                '<h1>❤ unicorns</h1>',
            '</body>',
        '</html>',
    ].join('');
[+] gravity13|11 years ago|reply
You can also

  var str = ' \
      <!doctype html> \
      <html> \
        <body> \
          <h1>❤ unicorns</h1> \
        </body> \
      </html> \
  '
I find it's better than string concat because the trailing \ is just one annoying thing rather than three.
[+] andrey-p|11 years ago|reply
Ooh I really really like this. Preserving newlines (one of the stated usecases for multiline) is dead easy too.

  var str = [
    //...
  ].join("\n");
[+] martin-adams|11 years ago|reply
Interesting solution. I usually find this type of problem when doing templating in the client when updating things via Ajax. I either use the DOM to store the template or end up concatenating for smaller things.

Since to preserve these comments in minification requires conscious effort, I wonder if there's an alternative that could convert the comments to regular JS before minification. Obviously you can't just run it in Node as normal doing it this way.

[+] PavlovsCat|11 years ago|reply
I thank you from the bottom of my heart. This drove me crazy when playing around with WebGL and shaders, because for various reasons I didn't want to put those in separate files.
[+] waynecochran|11 years ago|reply
Why aren't you just doing this, for example?

        <script id="fragment" type="x-shader">
	precision highp float;
	uniform vec3 glyphColor;
	void main() {
	        gl_FragColor = vec4(glyphColor, 1.0);
	}
	</script>
[+] ttty|11 years ago|reply
The first problem I see, is using any build process which will remove all the comments. Therefore your string will become ''. I wonder how to avoid this.
[+] evilpie|11 years ago|reply
>Note that ES6 will have template string which can be multiline, but time...

Firefox Nightly currently supports just enough of template strings to give you multiline strings.

[+] mattdesl|11 years ago|reply
Cool hack, but a cleaner solution would be to just use fs.readFileSync if you really want long strings, and let browserify/brfs to inline it for you in the browser.

Using this in a library would be pretty unsafe, given how it's browser-dependent, is prone to issues with minifcation, and could just break with future versions of your JS engine.

[+] cyphunk|11 years ago|reply
seriously? you people be nuts

    http://stackoverflow.com/a/15558082/2371924
    var myString = function(){/*
      multi-line
      string
    */}.toString().slice(14,-3)
take this code snippet, throw a package.json and some yaml in and make another npm to Show HN.
[+] coldtea|11 years ago|reply
Yeah, only it does several other things do. Like optionally removing indend whitespace.

Did you even read TFA?

[+] eob|11 years ago|reply
At one point the E4X standard (back in 2007?) enabled a cool multi-line string hack by promoting XML elements to language entities. You could say:

    var htmlFragment = "" + (<r><![CDATA[
    l(a
    
    le
    af
    fa
    
    ll
    
    s)
    one
    l
    
    iness
    
    - e.e. cummings
    ;
    ]]></r>);
And then `htmlFragment` would contain your multi-line string. (The addition with the empty string coerces the <r> element to output its `toString()` value, which happens to be the innerHTML).

This is largely a historical factoid, though. I don't think browsers beyond Mozilla ended up supporting E4X.

Really clever hack with the function's toString method!

[+] jasonkostempski|11 years ago|reply
Cool hack but not supporting multiline strings is a feature as far as I'm concerned. Everyone seems to agree that HTML shouldn't contain JavaScript, why should JavaScript contain HTML?
[+] biscarch|11 years ago|reply
That is actually currently being contested by React and .jsx.

That said, I've seen multiline abused for writing SQL queries as well, which would have been better off being written in a separate .SQL file and `fs.read` into a string with a descriptive var name. (Ignoring that massive SQL strings is a code smell imo).

[+] andrelaszlo|11 years ago|reply
This snippet does the same thing, mostly:

    var multiline = function(){/*
    foo
    bar
    baz
    */}.toSource().match(/\/\*([\s\S]*)\*\//)[1].trim()
[+] mofle|11 years ago|reply
Yeah, pretty much, but in Node we wrap repetitive things in modules, as they're super cheap. Your snippet is also missing some things like indentation stripping, error handling and browser support.
[+] jgillich|11 years ago|reply
I just use ES6 template strings together with the es6ify transform for Browserify. Works in all browsers and very likely performs much better than using Function.prototype.toString.
[+] z3t4|11 years ago|reply
If you do multi line strings you could probably do it in a smarter way. Examples:

appendChild instead of innerHTML .html file instead of html inside a .js file. .css file instead of css inside a .js file.

It can get very messy if you store "data" inside JS. Especially if you store markup or styling in the JS.

[+] tach4n|11 years ago|reply
Wouldn't something like a Sweet.js macro be better for this? Just have it output a string with '\n\' at the end of lines, or using Array.join() or whatever you like.
[+] chrishawes|11 years ago|reply
This is really handy for DFP creative templates. Thank you.
[+] teddyh|11 years ago|reply
Today I learned that in JavaScript, comments are significant and part of the code.

(And people complain about Python having significant whitespace?)

[+] Kiro|11 years ago|reply
Only significant if you want it to be.
[+] tfb|11 years ago|reply
Weird... I just just randomly looking at this a few days ago upon a search for "js multiline" when wondering about the common way to spell multiline (multi line vs multi-line vs multiline). I was intrigued by his code though, ultimately in awe of the cleverness and conciseness of it. Very cool hack! Crazy coincidence to see the very code on HN only a few days later.