JAVASCRIPT

JAVASCRIPT – Creating multiline strings in JavaScript

Multi-line strings 

  • The JavaScript language automatically adds semicolons to the end of lines, so creating multi-line strings will fail and generally result in errors.

Multi-line String Example

jQuery Code
var multiLineString = 'This is the 1st line 
    This is the 2nd line
    This is the 3rd line...';

Concatenation Multi-line String Example

jQuery Code
var multiLineString = 'This is the 1st line' + 
'This is the 2nd line' + 
'This is the 3rd line...';

Array to Multi-line String Example

  • Below method is used for multi-line strings in JavaScript that uses an Array and the join() method.
jQuery Code
var multiLineString = [
   'This is the 1st line',
   'This is the 2nd line',
   'This is the 3rd line...'
].join('\n');

Slash Concatenation Multi-line String Example

  • Below is another method that is done by adding a backslash at the end of each line which says the JavaScript engine that the string will continue to the next line, thus avoiding the automatic semicolon insertion annoyance.
jQuery Code
var multiLineString = 'This is the 1st line \
   'This is the 2nd line \
   'This is the 3rd line...';

Multiline strings in pure JavaScript:

  • This method is based on the serialization of functions, which is defined to be implementation-dependent.
jQuery Code
function hereDoc(f) {
  return f.toString().
      replace(/^[^\/]+\/\*!?/, '').
      replace(/\*\/[^\/]+$/, '');
}

Multiline strings in ES6 JavaScript

  • ECMAScript 6 (ES6) introduces a new type of literal, namely template literals. They have many features, variable interpolation among others.
  • Template Strings are demarked by a backtick(`) on either end and can contain other backticks if they are escaped by a backslash(ie. let my_stringname = `some name\`escaped\` thing`).

A template literal is delimited by backticks:

jQuery Code
var html = `
  <div>
   <span>Some HTML here</span>
</div>
;

features in Template Strings

  • Template Strings is that we can interpolate data into them using the `${data}` syntax. This means that instead of concatenating together a list of strings with lots of extra + operators and newlines we can insert data directly into a string.
  • The interpolation operator will evaluate arbitrary content so we are not limited to the declared variables.
    we can insert expressions to calculate a value or even instantiate a new instance of a class and render it to a string.
  • Template Strings is one of the ‘tagged’ variety.
    With the name of a function directly connected to a Template String, the string is then processed and fed into the function with the first argument being an array of normal strings(the ones separated by interpolated data) and the following arguments being a list of calculated values from interpolated sections of the Template String.
READ  Best Startups Examples on React Native

For example:

jQuery Code
let number = 33  
let type1 = 'problem'

function process_string (clean_strings, value1, value2) {  
  let new_string = `${clean_strings[0]}${value1}${clean_strings[1]}${value2}`

  return `${new_string}. Doncha know?`
  // creates a string processed slightly differently.
  // Just completely ignores clean_strings[2].
}

process_string`i have ${ number * 3 } ${ type1 + 's' }.`  
// "I have 99 problems. Doncha know?"

multiline strings in ES6 using Template Strings

  • The below given example of real HTML content with interpolated data written in ES5 and ES6 :
jQuery Code
var wiki = {  
  profile_image: 'http://wikitechy.com/300/300',
  name: 'wiki',
  title: ‘HTML, CSS, PHP'
}
function get_user_widget_markup (user) {  
  return [
    '<div class="user-profile">',
      '<img src="' + user.profile_image + '" alt="" class="user-image">',
      '<h2 class="user-name">',
        user.name,
      '</h2>',
      '<p class="user-title">',
        user.title,
      '</p>',
    '</div>'
  ].join('')
}
get_user_widget_markup(wiki) 

Creating an Array of Strings

  • To include an empty string or another separator in our Array#join method call or it will join our strings with the default separator(,) which can cause problems in many circumstances.
jQuery Code
var my_string = [  
  ‘Welcome to wikitechy, ',
  ‘Learn to code in wikitechy tutorial',
].join('')

About the author

author

author

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

X