Creating multiline strings in JavaScript

Question

I have the following code in Ruby  I want to convert this code into JavaScript  what s the equivalent code in JS   text    lt  lt  HERE  This Is A Multiline String HERE

User · Answer

Easiest way to make multiline strings in Javascrips is with the use of backticks ( `` ). This allows you to create multiline strings in which you can insert variables with ${variableName}.

Example:

_x000D_

let name = 'Willem'; _x000D_
let age = 26;_x000D_
_x000D_
let multilineString = `_x000D_
my name is: ${name}_x000D_
_x000D_
my age is: ${age}_x000D_
`;_x000D_
_x000D_
console.log(multilineString);

_x000D_

compatibility :

It was introduces in ES6//es2015
It is now natively supported by all major browser vendors (except internet explorer)

Check exact compatibility in Mozilla docs here

User · Answer

You can use    to concatenate your string  seems like no one answered that  which will be readable  and also neat    something like this  var hello    hello                 world                 blah     can be also written as  var hello    hello       hello      world       hello      blah    console log hello

User · Answer

The equivalent in javascript is   var text     This Is A Multiline String      Here s the specification  See browser support at the bottom of this page  Here are some examples too

User · Answer

i found a more elegant solution  maybe a little non-topic related because it uses PHP  but im sure it will be useful and cuteness  for some of yours     this javascript code should stay inside script tags  var html  lt  php echo json encode             lt div class container gt               lt div class area1 gt                  xxx              lt  div gt               lt div class area2 gt                     someVar                lt  div gt           lt  div gt         gt    in your output html you will see something like  var html   r n r n t t t lt div class container gt  r n t t t t lt div class area1 gt  r n t t t t txxx r n t t t t lt   div gt  r n t t t t lt div class area2 gt  r n t t t t t44 r n t t t t lt   div gt  r n t t t lt   div gt  r n r n t t        nbsp     and et voil     it gives you code readability in your file   pD  this sample uses json encode   PHP function  but certainly there are function equivalents for ASP  Ruby and JSP langs   pD  however  this solution have his limitations too  one of them is you cannot use javascript variables inside the encapsulated code

User · Answer

There are multiple ways to achieve this  1  Slash concatenation    var MultiLine    1      2      3      4      5      6      7      8      9     2  regular concatenation  var MultiLine    1    2    3    4    5     3  Array Join concatenation  var MultiLine      1    2    3    4    5    join        Performance wise  Slash concatenation  first one  is the fastest   Refer this test case for more details regarding the performance   Update   With the ES2015  we can take advantage of its Template strings feature  With it  we just need to use back-ticks for creating multi line strings  Example      lt h1 gt   title   lt  h1 gt     lt h2 gt   hero name   details  lt  h2 gt     lt div gt  lt label gt id   lt  label gt   hero id   lt  div gt     lt div gt  lt label gt name   lt  label gt   hero name   lt  div gt

User · Answer

My version of array-based join for string concat   var c         c stands for content c push   lt div id  thisDiv  style  left 10px  gt  lt  div gt     c push   lt div onclick  showDo   something      gt  lt  div gt       body  append c join   n       This has worked well for me  especially as I often insert values into the html constructed this way  But it has lots of limitations  Indentation would be nice  Not having to deal with nested quotation marks would be really nice  and just the bulkyness of it bothers me   Is the  push   to add to the array taking up a lot of time  See this related answer    Is there a reason JavaScript developers don  39 t use Array push       After looking at these  opposing  test runs  it looks like  push   is fine for string arrays which will not likely grow over 100 items - I will avoid it in favor of indexed adds for larger arrays

User · Answer

Using script tags    add a  lt script gt     lt  script gt  block containing your multiline text into head tag  get your multiline text as is     watch out for text encoding  UTF-8  ASCII    lt script gt          pure javascript     var text   document getElementById  mySoapMessage   innerHTML           using JQuery s document ready for safety       document  ready function              var text       mySoapMessage   html                lt  script gt    lt script id  mySoapMessage  type  text plain  gt        lt soapenv Envelope xmlns soapenv  http   schemas xmlsoap org soap envelope   xmlns typ       gt          lt soapenv Header  gt          lt soapenv Body gt             lt typ getConvocadosElement gt                              lt  typ getConvocadosElement gt          lt  soapenv Body gt       lt  soapenv Envelope gt        lt  -- this comment will be present on your string -- gt        uh-oh  javascript comments     SOAP request will fail     lt  script gt

User · Answer

You have to use the concatenation operator        lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt meta charset  UTF-8  gt       lt title gt Document lt  title gt   lt  head gt   lt body gt       lt p id  demo  gt  lt  p gt       lt script gt          var str    This                       n lt br gt is                       n lt br gt multiline                       n lt br gt string            document getElementById  demo   innerHTML   str        lt  script gt   lt  body gt   lt  html gt    By using  n your source code will look like -   This    lt br gt is   lt br gt multiline   lt br gt string    By using  lt br gt  your browser output will look like -    This is multiline string

User · Answer

You can have multiline strings in pure JavaScript  This method is based on the serialization of functions  which is defined to be implementation-dependent  It does work in the most browsers  see below   but there s no guarantee that it will still work in the future  so do not rely on it  Using the following function  function hereDoc f      return f toString          replace                             replace                        You can have here-documents like this  var tennysonQuote   hereDoc function          Theirs not to make reply    Theirs not to reason why    Theirs but to do and die        The method has successfully been tested in the following browsers  not mentioned   not tested    IE 4 - 10 Opera 9 50 - 12  not in 9-  Safari 4 - 6  not in 3-  Chrome 1 - 45 Firefox 17 - 21  not in 16-  Rekonq 0 7 0 - 0 8 0 Not supported in Konqueror 4 7 4  Be careful with your minifier  though  It tends to remove comments  For the YUI compressor  a comment starting with      like the one I used  will be preserved  I think a real solution would be to use CoffeeScript  ES6 UPDATE  You could use backtick instead of creating a function with a comment and running toString on the comment  The regex would need to be updated to only strip spaces  You could also have a string prototype method for doing this  let foo       bar loves cake   baz loves beer   beer loves people   removeIndentation    Someone should write this  removeIndentation string method

User · Answer

You can use tagged templates to make sure you get the desired output  For example     Merging multiple whitespaces and trimming the output  const t    strings    gt    return strings map  s    gt  s replace   s  g        join  quot  quot   trim     console log t    This   Is   A   Multiline   String        Output   This Is A Multiline String      Similar but keeping whitespaces   const tW    strings    gt    return strings map  s    gt  s replace   s  g    n    join  quot  quot   trim     console log tW    This   Is   A   Multiline   String        Output   This nIs nA nMultiline nString

User · Answer

This is one fairly economical approach  at least in terms of the source code   function s         var args      index      for  index   0  index lt  arguments length  index              args push  arguments  index              return args join    n      console log  s        This is the first line        and this is the second        finally a third       function s    return arguments join    n       would be nicer of course if the  arguments  property were a proper array   A second version might use    to do the join for cases when you want to control the line breaks in a very long string

User · Answer

Exact Ruby produce   quot This nIs nA nMultiline nString n quot  - below JS produce exact same string  x000D   x000D  text    This Is A Multiline String       TEST console log JSON stringify text    console log text   x000D   x000D   x000D   This is improvement to Lonnie Best answer because new-line characters in his answer are not exactly the same positions as in ruby output

User · Answer

I think this workaround should work in IE  Chrome  Firefox  Safari  Opera -  Using jQuery     lt xmp id  unique id  style  display none   gt    Some plain text   Both type of quotes          And          JS Code   alert  Hello World      HTML Code    lt div class  some class  gt  lt  div gt   lt  xmp gt   lt script gt     alert     unique id   html      lt  script gt    Using Pure Javascript     lt xmp id  unique id  style  display none   gt    Some plain text   Both type of quotes          And          JS Code   alert  Hello World      HTML Code    lt div class  some class  gt  lt  div gt   lt  xmp gt   lt script gt     alert document getElementById  unique id   innerHTML    lt  script gt    Cheers

User · Answer

Update   ECMAScript 6  ES6  introduces a new type of literal  namely template literals  They have many features  variable interpolation among others  but most importantly for this question  they can be multiline   A template literal is delimited by backticks   var html        lt div gt       lt span gt Some HTML here lt  span gt     lt  div gt        Note  I m not advocating to use HTML in strings   Browser support is OK  but you can use transpilers to be more compatible     Original ES5 answer   Javascript doesn t have a here-document syntax  You can escape the literal newline  however  which comes close    foo   bar

User · Answer

My extension to https   stackoverflow com a 15558082 80404  It expects comment in a form     any multiline comment    where symbol   is used to prevent removing by minification  at least for YUI compressor   Function prototype extractComment   function         var startComment              var endComment             var str   this toString         var start   str indexOf startComment       var end   str lastIndexOf endComment        return str slice start   startComment length  - str length - end         Example   var tmpl   function           lt div class  navbar-collapse collapse  gt       lt ul class  nav navbar-nav  gt       lt  ul gt    lt  div gt      extractComment

User · Answer

This works in IE  Safari  Chrome and Firefox    lt script type  text javascript  src  https   ajax googleapis com ajax libs jquery 1 4 4 jquery min js  gt  lt  script gt   lt div class  crazy idea  thorn in my side   lt table  border  0  gt                           lt tr gt                               lt td  gt  lt span class  mlayouttablecellsdynamic  gt PACKAGE price  65 00 lt  span gt  lt  td gt                           lt  tr gt                       lt  table gt   gt  lt  div gt   lt script type  text javascript  gt      alert     crazy idea   attr  thorn in my side      lt  script gt

User · Answer

the pattern text    lt  lt  HERE  This Is A Multiline String HERE is not available in js  I remember using it much in my good old Perl days    To keep oversight with complex or long multiline strings I sometimes use an array pattern   var myString          lt div id  someId  gt         some content lt br   gt          lt a href   someRef  gt someRefTxt lt  a gt          lt  div gt        join   n      or the pattern anonymous already showed  escape newline   which can be an ugly block in your code       var myString             lt div id  someId  gt    some content lt br   gt     lt a href   someRef  gt someRefTxt lt  a gt     lt  div gt      Here s another weird but working  trick 1   var myString    function            lt div id  someId  gt       some content lt br   gt        lt a href   someRef  gt someRefTxt lt  a gt       lt  div gt               toString   match                          1     external edit  jsfiddle  ES20xx supports spanning strings over multiple lines using template strings   let str    This is a text     with multiple lines      Escapes are interpreted       n is a newline    let str   String raw This is a text     with multiple lines      Escapes are not interpreted       n is not a newline      1 Note  this will be lost after minifying obfuscating your code

User · Answer

It s not extremely elegant but it s clean enough for me   var myString    First line      n   var myString   myString    Second line      n   var myString   myString    Third line      n

User · Answer

I m surprised I didn t see this  because it works everywhere I ve tested it and is very useful for e g  templates    lt script type  bogus  id  multi  gt      My     multiline     string  lt  script gt   lt script gt      alert     multi   html      lt  script gt    Does anybody know of an environment where there is HTML but it doesn t work

User · Answer

I like this syntax and indendation   string    my long string    n            continue here n            and here       but actually can t be considered as multiline string

User · Answer

to sum up  I have tried 2 approaches listed here in user javascript programming  Opera 11 01     this one didn t work  Creating multiline strings in JavaScript this worked fairly well  I have also figured out how to make it look good in Notepad   source view  Creating multiline strings in JavaScript   So I recommend the working approach for Opera user JS users  Unlike what the author was saying       It doesn t work on firefox or opera  only on IE  chrome and safari     It DOES work in Opera 11  At least in user JS scripts  Too bad I can t comment on individual answers or upvote the answer  I d do it immediately  If possible  someone with higher privileges please do it for me

User · Answer

ES6 allows you to use a backtick to specify a string on multiple lines   It s called a Template Literal   Like this   var multilineString    One line of text     second line of text     third line of text     fourth line of text     Using the backtick works in NodeJS  and it s supported by Chrome  Firefox  Edge  Safari  and Opera   https   developer mozilla org en-US docs Web JavaScript Reference Template literals

User · Answer

I solved this by outputting a div  making it hidden  and calling the div id by jQuery when I needed it   e g    lt div id  UniqueID  style  display none   gt       Strings      On      Multiple      Lines      Here  lt  div gt    Then when I need to get the string  I just use the following jQuery       UniqueID   html      Which returns my text on multiple lines  If I call   alert     UniqueID   html       I get

User · Answer

Downvoters  This code is supplied for information only    This has been tested in Fx 19 and Chrome 24 on Mac    DEMO   x000D   x000D  var new comment     lt  lt  lt EOF  x000D       lt li class  photobooth-comment  gt  x000D          lt span class  username  gt  x000D             lt a href     gt You lt  a gt   x000D          lt  span gt  x000D          lt span class  comment-text  gt  x000D             text x000D          lt  span gt   x000D           lt span class  comment-time  gt  x000D            2d x000D          lt  span gt  ago x000D       lt  li gt  x000D  EOF   x000D     note the script tag here is hardcoded as the FIRST tag  x000D  new comment document currentScript innerHTML split  EOF   1    x000D  document querySelector  ul   innerHTML new comment replace   text   This is a dynamically created text    x000D   lt ul gt  lt  ul gt  x000D   x000D   x000D

User · Answer

If you re willing to use the escaped newlines  they can be used nicely   It looks like a document with a page border

User · Answer

I think I discovered another way to do it inline without any invasive syntax on every line  Use Javascript s ability to convert a function to string and create a multiline comment with the      syntax then remove the  function       n  and   n       var multiline   function string    return string toString   replace       n   n    n        g           console log multiline function       Hello world  I m a multiline string   Tada           The only pitfall I can see in this is the syntax highlighting   EDIT  Had I scrolled down a little more  I would have seen this answer doing exactly the same thing  https   stackoverflow com a 5571069 916553

User · Answer

Also do note that  when extending string over multiple lines using forward backslash at end of each line  any extra characters  mostly spaces  tabs and comments added by mistake  after forward backslash will cause unexpected character error  which i took an hour to find out  var string    line1      comment  space or tabs here raise error line2

User · Answer

The Rule is  when inside a string  use  n wherever you want a new line  you do not have to put a space before or after the  n  JavaScript s interpreter is smart enough to know how long the unprintable character representation is

User · Answer

Just tried the Anonymous answer and found there s a little trick here  it doesn t work if there s a space after backslash    So the following solution doesn t work -  var x     test   lt  xml version  1 0   gt    lt -- One space here              lt  mso-application progid  Excel Sheet   gt         But when space is removed it works -   var x     test   lt  xml version  1 0   gt   lt -- No space here now            lt  mso-application progid  Excel Sheet   gt        alert x test      Hope it helps

User · Answer

ES6 Update   As the first answer mentions  with ES6 Babel  you can now create multi-line strings simply by using backticks   const htmlString    Say hello to  multi-line strings      Interpolating variables is a popular new feature that comes with back-tick delimited strings   const htmlString      user name  liked your post about strings     This just transpiles down to concatenation   user name     liked your post about strings    Original ES5 answer      Google s JavaScript style guide recommends to use string concatenation instead of escaping newlines       Do not do this   var myString    A rather long string of English text  an error message                   actually that just keeps going and going -- an error                   message to make the Energizer bunny blush  right through                   those Schwarzenegger shades   Where was I  Oh yes                    you  ve got an error and all the extraneous whitespace is                   just gravy   Have a nice day          The whitespace at the beginning of each line can t be safely stripped at compile time  whitespace after the slash will result in tricky errors  and while most script engines support this  it is not part of ECMAScript       Use string concatenation instead   var myString    A rather long string of English text  an error message                     actually that just keeps going and going -- an error                     message to make the Energizer bunny blush  right through                     those Schwarzenegger shades   Where was I  Oh yes                      you  ve got an error and all the extraneous whitespace is                     just gravy   Have a nice day

User · Answer

Please for the love of the internet use string concatenation and opt not to use ES6 solutions for this  ES6 is NOT supported all across the board  much like CSS3 and certain browsers being slow to adapt to the CSS3 movement  Use plain ol  JavaScript  your end users will thank you   Example   var str    This world is neither flat nor round                 Once was lost will be found

User · Answer

Updated for 2015  it s six years later now   most people use a module loader  and the main module systems each have ways of loading templates  It s not inline  but the most common type of multiline string are templates  and templates should generally be kept out of JS anyway   require js   require text    Using require js  text  plugin  with a multiline template in template html  var template   require  text template html     NPM browserify  the  brfs  module  Browserify uses a  brfs  module to load text files  This will actually build your template into your bundled HTML   var fs   require  fs    var template   fs readFileSync template html    utf8      Easy

User · Answer

I program this way   sys         layout  null      makeLayout  function  obCLS            this layout       lt div   gt    addClass  editor   appendTo   obCLS   append                  Cargador                    this layout find   gt  div nth-of-child 1                      lt div gt                      lt p gt Seleccione la imagen que desea procesar  lt  p gt                      lt input type  button  value  Seleccionar  class  btn btn-xlarge btn-success    gt                      lt span gt  lt  span gt                   lt  div gt                     Cargador - Progreso                    this layout find   gt  div nth-of-child 2                      lt div gt                      lt div gt                          lt div gt  lt  div gt                          lt div gt                              lt div gt  lt  div gt                          lt  div gt                      lt  div gt                   lt  div gt                     Editor                    this layout find   gt  div nth-of-child 3                     sidebar   this layout find   gt  div nth-of-child 3   gt  div  gt  div  gt  div nth-of-type 1                     body      this layout find   gt  div nth-of-child 3   gt  div  gt  div  gt  div nth-of-type 2   gt  div                     lt div gt                      lt div gt                          lt div gt                              lt div gt  lt  div gt                              lt div gt                                  lt div gt  lt  div gt                              lt  div gt                          lt  div gt                      lt  div gt                   lt  div gt                       sys makeLayout   div

User · Answer

You can do this     var string    This is n     a multiline n      string

User · Answer

You can use TypeScript  JavaScript SuperSet   it supports multiline strings  and transpiles back down to pure JavaScript without overhead   var templates         myString   this is a multiline string      alert templates myString     If you d want to accomplish the same with plain JavaScript   var templates       myString  function          This is some     awesome multi-lined     string using a comment      inside a function      returned as a string      Enjoy the jimmy rigged code      toString   slice 14 -3     alert templates myString    Note that the iPad Safari does not support  functionName toString     If you have a lot of legacy code  you can also use the plain JavaScript variant in TypeScript  for cleanup purposes    interface externTemplates       myString string     declare var templates externTemplates   alert templates myString    and you can use the multiline-string object from the plain JavaScript variant  where you put the templates into another file  which you can merge in the bundle    You can try TypeScript at http   www typescriptlang org Playground

User · Answer

There s this library that makes it beautiful   https   github com sindresorhus multiline  Before  var str          lt  doctype html gt       lt html gt          lt body gt              lt h1 gt   unicorns lt  h1 gt          lt  body gt       lt  html gt           After  var str   multiline function       lt  doctype html gt   lt html gt       lt body gt           lt h1 gt   unicorns lt  h1 gt       lt  body gt   lt  html gt

User · Answer

If you happen to be running in Node only  you could use the fs module to read in the multi-line string from a file   var diagram  var fs   require  fs    fs readFile    dirname     diagram txt   function  err  data      if  err        throw err         diagram   data toString

User · Answer

The ES6 way of doing it would be by using template literals   const str    This   is   a  multiline text     console log str     More reference here

User · Answer

I came up with this very jimmy rigged method of a multi lined string  Since converting a function into a string also returns any comments inside the function you can use the comments as your string using a multilined comment       You just have to trim off the ends and you have your string   var myString   function          This is some     awesome multi-lined     string using a comment      inside a function      returned as a string      Enjoy the jimmy rigged code      toString   slice 14 -3   alert myString

[javascript] Creating multiline strings in JavaScript

Example:

compatibility :

Examples related to javascript

Examples related to string

Examples related to multiline

Examples related to heredoc