What is the difference between using ` and "/' for strings in JavaScript?

twitter logo github logo ・1 min read

I was putting a variable in a string and I noted the following

var Num = 2

var variableString1 = "${Num}" //Does not work, is only equal to "${Num}"

var variableString2 = `${Num}` //This is still a string, but it works, and the value is equal to "2"

But what is this strange JS behavior?
Is there a specific name for this?
Thanks,
and Cheers!

twitter logo DISCUSS (13)
markdown guide
 

In JS, strings delimited with backticks are called 'template strings'. They're handled specially by the interpreter in that you can put expressions (literally any valid JS expression, including IFFE's) inside ${} in a template string, and they will be evaluated and the results substituted into the string exactly where they were. This functionality was added as part of ECMAScript 6, and you can see availability info on Can I Use?.

The idea here is that instead of having to go through concatenating multiple strings and non-string values to assemble a larger string (log message, HTML snippet, etc), you can instead use a template string and avoid the overhead of string concatenation. In essence, it's the same idea as format strings in other languages (for example sprintf() in C/C++, or format() in Python).

Note that this is not exactly a JS specific construct. A number of languages have something similar. For example, in GNU bash, you can wrap a statement in $() in a double-quoted string to get similar behavior, and Elixir lets you do the same thing in any string using #{}.

 

Could you theoretically put an alert() statement in these strings to run it? or does it only use the return value?

 

You can put any synchronous expression inside the placeholder. The evaluated value of that gets inserted into the final string. Using alert() doesn't make sense but it's possible.

Ok, because I tested and do get "undefined" but it evaluates... JS works 'interestingly'.

Yeah, 'undefined' is kind of the default return value for stuff that doesn't return anything.

prompt() may produce more interesting results.

I have found this quite useful, bur I will make a post similar to this but with strings that use '/'.
Anyways, thanks for the help!
Cheers!

 

variableString1 simply prints what's inside the double quote.
variableString2 uses a newer technique called String Interpolation which allow you to embed variables in string instead of concatenating variables and strings.

 

The docs are good.

developer.mozilla.org/en-US/docs/W...

Template strings, is one name. I think the technical name is "template literals"

 

Just like Austin said it, it's called a template string and your triggering its functionality with a backtick.
The good ol' way of defining a string with "" won't work with template strings as far as I know, and will just signal to JS that you want to instantiate a string object.

 
 

string interpolation
Ruby has something similar, but quote types reversed. (In Ruby, single quotes takes the whole string verbatim, double allows interpretation of whatever is in ${}.)

 

Hey, question...
Why are there so many kinds of strings in each language, and why?

 

There are three reasons why Ruby has two types of strings.

  1. Double quote " requires two bytes, while single quote ' requires only 1 byte. The more compelling reasons are

  2. If you want to create a string that has an apostrophe in it, for example She's writing code, with a single quote it would break the string. So the two ways to write it are "She's writing code" or with escaping 'She\'s writing code' which is just harder to read.

  3. As others mentioned, Ruby has interpolation (a feature Javascript did not have till more recently) so

passion = "writing code"
"She's #{passion}" 

Also works.

Classic DEV Post from Mar 1

What was your win this week?

Got to all your meetings on time? Started a new project? Fixed a tricky bug?

PDS OWNER CALIN (Calin Baenen) profile image
I am a 13 (as of Oct 30 of 2019) yr/o developer who makes projects in languages like: Java, HTML, Python, JS, CSS, C, and am working on learning C++, and C#.