Javascript Can Do Multiline Strings??

Posted on 01/27/2009 @ 02:31AM

This one was a shocker to me. While reading this post on jQuery animation, I followed the link to Karl Swedberg's jQuery example. Whilst looking at the source, I saw a bit of code that made me stop and stare:


  $.extend($.facebox, {
    settings: {
      opacity      : 0,
      overlay      : true,
      loadingImage : '/facebox/loading.gif',
      closeImage   : '/facebox/closelabel.gif',
      imageTypes   : [ 'png', 'jpg', 'jpeg', 'gif' ],
      faceboxHtml  : '\
    <div id="facebox" style="display:none;"> \
      <div class="popup"> \
        <table> \
          <tbody> \
            <tr> \
              <td class="tl"/><td class="b"/><td class="tr"/> \
            </tr> \
            <tr> \
              <td class="b"/> \
              <td class="body"> \
                <div class="content"> \
                </div> \
                <div class="footer"> \
                  <a href="#" class="close"> \
                    <img src="/facebox/closelabel.gif" title="close" class="close_image" /> \
                  </a> \
                </div> \
              </td> \
              <td class="b"/> \
            </tr> \
            <tr> \
              <td class="bl"/><td class="b"/><td class="br"/> \
            </tr> \
          </tbody> \
        </table> \
      </div> \
    </div>'
    },

Holy crap! A multiline string in JS? Is it even possible?

I thought it might have something to do with the fact that he had an HTML 5 doctype at the top of the page. So I googled a bit, and as it turns out, it's actually documented. And moreover, some testing revealed that it works in all major browsers, including IE 6.

This is a pretty cool discovery. It means that we now have an alternate way of setting a block of content into a Javascript variable. It's not perfectly pretty, but it's less bloated than rendering it in the html, and way neater than string concatenation.