How can I do string interpolation in JavaScript

Question

Consider this code   var age   3   console log  I m     age     years old       Are there any other ways to insert the value of a variable in to a string  apart from string concatenation

User · Answer

Word of caution  avoid any template system which does t allow you to escape its own delimiters  For example  There would be no way to output the following using the supplant   method mentioned here       I am 3 years old thanks to my  age  variable     Simple interpolation may work for small self-contained scripts  but often comes with this design flaw that will limit any serious use   I honestly prefer DOM templates  such as    lt div gt  I am  lt span id  age  gt  lt  span gt  years old  lt  div gt    And use jQuery manipulation      age   text 3   Alternately  if you are simply just tired of string concatenation  there s always alternate syntax   var age   3  var str     I m only   age   years old   join

User · Answer

Using template syntax fails in older browsers  important if you are creating HTML for public use  Using concatenation is tedious and hard to read  particularly if you have many or long expressions  or if you must use parentheses to handle mixtures of number and string items  both of which use the   operator    PHP expands quoted strings containing variables and even some expressions using a very compact notation   a  the color is  color    In JavaScript  an efficient function can be written to support this  var a S  the color is   color    using a variable number of arguments  While there is no advantage over concatenation in this example  when the expressions get longer this syntax may be clearer  Or one can use the dollar sign to signal the start of an expression using a JavaScript function  as in PHP   On the other hand  writing an efficient workaround function to provide template-like expansion of strings for older browsers wouldn t be hard  Someone has probably done it already   Finally  I imagine that sprintf  as in C  C    and PHP  could be written in JavaScript  although it would be a little less efficient than these other solutions

User · Answer

Here s a solution which requires you to provide an object with the values  If you don t provide an object as parameter  it will default to using global variables  But better stick to using the parameter  it s much cleaner    x000D   x000D  String prototype interpolate   function props    x000D      return this replace      w     g  function match  expr    x000D          return  props    window  expr   x000D          x000D     x000D   x000D     Test  x000D   x000D     Using the parameter  advised approach  x000D  document getElementById  resultA   innerText    Eruption 1   eruption1   interpolate   eruption1  112     x000D   x000D     Using the global scope x000D  var eruption2   116  x000D  document getElementById  resultB   innerText    Eruption 2   eruption2   interpolate    x000D   lt div id  resultA  gt  lt  div gt  lt div id  resultB  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Supplant more for ES6 version of  Chris Nielsen s post    String prototype supplant   function  o      return this replace                 g       a  b    gt          var r   o b         return typeof r      string     typeof r      number    r   a                 string    How now   color  cow     greeting      greeting   moo says the   color  cow     string supplant  color   brown   greeting   moo       gt   How now brown cow   moo   moo  moo says the brown cow

User · Answer

Couldn t find what I was looking for  then found it -  If you re using Node js  there s a built-in utilpackage with a format function that works like this   util format  Hello my name is  s    Brent     gt  Hello my name is Brent   Coincidentally this is now built into console log flavors too in Node js -  console log  This really bad error happened   s    ReferenceError     gt  This really bad error happened  ReferenceError

User · Answer

Douglas Crockford s Remedial JavaScript includes a String prototype supplant function   It is short  familiar  and easy to use   String prototype supplant   function  o        return this replace             g          function  a  b                var r   o b               return typeof r      string     typeof r      number    r   a                          Usage  alert  I m  age  years old   supplant   age  29      alert  The  a  says  n    n    n    supplant   a   cow   n   moo         If you don t want to change String s prototype  you can always adapt it to be standalone  or place it into some other namespace  or whatever

User · Answer

Since ES6  if you want to do string interpolation in object keys  you will get a SyntaxError  expected property name  got      if you do something like   let age   3 let obj        age    3     You should do the following instead   let obj         age     3

User · Answer

I use this pattern in a lot of languages when I don t know how to do it properly yet and just want to get an idea down quickly      JavaScript let stringValue    Hello  my name is  name   You  action  my  relation         replace   name  g      Indigo Montoya        replace   action  g    killed        replace   relation  g  father           While not particularily efficient  I find it readable  It always works  and its always available     VBScript dim template    Hello  my name is  name   You  action  my  relation    dim stringvalue   template stringValue   replace stringvalue    name        Luke Skywalker        stringValue   replace stringvalue    relation    Father        stringValue   replace stringvalue    action      are     ALWAYS    COBOL INSPECT stringvalue REPLACING FIRST   name       BY  Grendel  INSPECT stringvalue REPLACING FIRST   relation   BY  Mother  INSPECT stringvalue REPLACING FIRST   action     BY  did unspeakable things to

User · Answer

Since ES6  you can use template literals    x000D   x000D  const age   3 x000D  console log  I m   age  years old    x000D   x000D   x000D    P S  Note the use of backticks

User · Answer

You can do easily using ES6 template string and transpile to ES5 using any available transpilar like babel   const age   3   console log  I m   age  years old       http   www es6fiddle net im3c3euc

User · Answer

Custom flexible interpolation    x000D   x000D  var sourceElm   document querySelector  input   x000D   x000D     interpolation callback x000D  const onInterpolate   s   gt    lt mark gt   s  lt  mark gt   x000D   x000D     listen to  input  event x000D  sourceElm addEventListener  input   parseInput   x000D   x000D     parse on window load x000D  parseInput    x000D   x000D     input element parser x000D  function parseInput    x000D    var html   interpolate sourceElm value  undefined  onInterpolate  x000D    sourceElm nextElementSibling innerHTML   html  x000D    x000D   x000D     the actual interpolation  x000D  function interpolate str  interpolator                 cb   x000D       split by  start  pattern x000D    return str split interpolator 0   map  s1  i    gt    x000D         first item can be safely ignored x000D     if  i    0   return s1  x000D         for each splited part  split again by  end  pattern  x000D      const s2   s1 split interpolator 1    x000D   x000D         is there s no  closing  match to this part  rebuild it x000D      if  s1    s2 0   return interpolator 0    s2 0  x000D         if this split s result as multiple items  array  it means the first item is between the patterns x000D      if  s2 length  gt  1    x000D          s2 0    s2 0   x000D              cb s2 0      replace the array item with whatever x000D              interpolator join        nothing was between the interpolation pattern x000D        x000D   x000D      return s2 join        merge splited array  part2  x000D       join        merge everything  x000D    x000D  input   x000D    padding 5px   x000D    width  100    x000D    box-sizing  border-box  x000D    margin-bottom  20px  x000D    x000D   x000D     x000D    font  14px Arial  x000D    padding 5px  x000D    x000D   lt input value  Everything between      is   processed      gt  x000D   lt div gt  lt  div gt  x000D   x000D   x000D

User · Answer

If you want to interpolate in console log output  then just  console log  Eruption 1   s   eruption1                                 Here   s is what is called a  format specifier   console log has this sort of interpolation support built-in

User · Answer

You could use Prototype s template system if you really feel like using a sledgehammer to crack a nut   var template   new Template  I m   age  years old     alert template evaluate  age  21

User · Answer

Try sprintf library  a complete open source JavaScript sprintf implementation   For example   vsprintf  The first 4 letters of the english alphabet are   s   s   s and  s     a    b    c    d       vsprintf takes an array of arguments and returns a formatted string

User · Answer

I can show you with an example    x000D   x000D  function fullName first  last    x000D    let fullName   first         last  x000D    return fullName  x000D    x000D   x000D  function fullNameStringInterpolation first  last    x000D    let fullName      first    last    x000D    return fullName  x000D    x000D   x000D  console log  Old School      fullName  Carlos    Gutierrez     x000D   x000D  console log  New School      fullNameStringInterpolation  Carlos    Gutierrez     x000D   x000D   x000D

User · Answer

Try kiwi  a light-weight JavaScript module for string interpolation   You can do  Kiwi compose  I m   years old     age      or  Kiwi compose  I m   age  years old      age    age

User · Answer

Expanding on Greg Kindel s second answer  you can write a function to eliminate some of the boilerplate   var fmt         join  function             return Array prototype slice call arguments  join                  log  function             console log this join    arguments              Usage   var age   7  var years   5  var sentence   fmt join  I am now   age   years old     fmt log  In   years   years I will be   age   years   years old

User · Answer

tl dr  Use ECMAScript 2015 s Template String Literals  if applicable   Explanation  There is no direct way to do it  as per ECMAScript 5 specifications  but ECMAScript 6 has template strings  which were also known as quasi-literals during the drafting of the spec  Use them like this    gt  var n   42  undefined  gt   foo  n bar   foo42bar    You can use any valid JavaScript expression inside the     For example    gt   foo   name   Google   name bar   fooGooglebar   gt   foo  1   3 bar   foo4bar    The other important thing is  you don t have to worry about multi-line strings anymore  You can write them simply as   gt   foo         bar   foo n    bar    Note  I used io js v2 4 0 to evaluate all the template strings shown above  You can also use the latest Chrome to test the above shown examples   Note  ES6 Specifications are now finalized  but have yet to be implemented by all major browsers  According to the Mozilla Developer Network pages  this will be implemented for basic support starting in the following versions  Firefox 34  Chrome 41  Internet Explorer 12  If you re an Opera  Safari  or Internet Explorer user and are curious about this now  this test bed can be used to play around until everyone gets support for this

User · Answer

While templates are probably best for the case you describe  if you have or want your data and or arguments in iterable array form  you can use String raw   String raw     raw    I m      years old       3     With the data as an array  one can use the spread operator   const args    3   yesterday    String raw     raw    I m      years old as of              args

[javascript] How can I do string interpolation in JavaScript?

Examples related to javascript

Examples related to string

Examples related to string-interpolation