JavaScript Quotes

Before I start

So last month I decided that it was, after over 15 years of web development, about time that I learnt JavaScript properly.

To do this has decided to use 3 resources:

I choose these for a number of reasons, the first two are free to take online, although you can pay Codecademy for a Pro version that gives you access to more content. Beginner JavaScript is a paid for course by Wes Bos, Ive previously bought two of his other courses (ES6 for Everyone & React for Beginners), I paid for this because I know that my learning style is best when someone is explaining it to me, and Wes does a great job of doing this, plus I can rewatch the videos over and over. Learning styles are important and you can find out your learning style by doing an online quiz.

Quotes in JavaScript

There are 3 different quotes that can be used in JavaScript to declare strings, settings, etc. They are:

Single quotes - '
Double quotes - "
Backticks - `

Issues with quotes

It's easy to declare a variable in JavaScript:

const myVariable = "Whatever I set this to";

This is all good until you want to set a string with double quotes within it:

const myVariable = "Dave said: "Hello World"";

What happens here is the second " , just before Hello closes this string and we will get an error Uncaught SyntaxError: Unexpected identifier .

This can easily be solved by using ' (single quotes) to declare the variable string with the double quotes within them:

const myVariable = 'Dave said: "Hello World";'

This is great and works until our string contains an apostrophe:

const myVariable = 'Dave's friend said: "Hello World"';

This time the apostrophe in Dave's stops the string and we again the same error Uncaught SyntaxError: Unexpected identifier .

Again there is a way to fix this by escaping the internal quotes, escaping is done by placing a backslash before the quote:

const myVariable = 'Dave\'s friend said: "Hello World"';

With the advent of ES6 in 2015 we can now also use ` backticks. This means that there will be less need to escape as backticks are just much less used.

const myVariable = `Dave's friend said: "Hello World"`;

Other advantages of ` backticks

Multi-line strings

While multi-line strings can be created without ` backticks, by escaping the end of the line:

const multiLineString = 'This is \
a multi-line \
string';

When the string is output on a single line:

>  multiLineString
< "This is a multi-line string"

Using ` backticks we can just write the multi-line string:

const multiLineString = `This is 
a multi-line 
string`;

This might not seam like something that you'll want to do but sometimes we want a string that is a block of code:

const myHTML = `
<ul>
   <li>one</li>
   <li>two</li>
   <li>three</li> 
  </ul>
`;

This will return the multi-line string correctly:

> myHTML
< "
 <ul>
   <li>one</li>
   <li>two</li>
   <li>three</li>
 </ul> 
"

Interpolation

/ɪntəːpəˈleɪʃ(ə)n/
noun

the insertion of something of a different nature into something else.
a remark interjected in a conversation.

What this means is that we can inject other variables into our strings using the syntax ${myVariable} . For example:

const myName = `Dave`;
const myAge = 50;
const myHobby = `Coding`;
const sayDetails =`My name is ${myName} I am ${myAge} years old and my hobby is ${myHobby}.`;

Previously this had to be done breaking the string and using + plus to add in the variables and restarting the string:

const myName = `Dave`;
const myAge = 50;
const myHobby = `Coding`;
const sayDetails = "My name is " + myName + "I am " + myAge + " years old and my hobby is " + myHobby + ".";

Both of these examples will output:

My name is Dave I am 50 years old and my hobby is Coding.

When injecting variables into strings using interpolation you can also perform maths on them. For example:

const myName = `Dave`;
const myAge = 50;
const sayDogYears = `My name is ${myName} I am ${myAge} years old, although in dog years I would be ${myAge * 7} years old.`

The output of sayDogYears would be:

"My name is Dave I am 50 years old, although in dog years I would be 350 years old."

ESLint

I use ESLint with VS Code to check my code is valid while I write it, as probably many other do too.

I have created a config that changes ' (single quotes) and " (double quotes) to ` backticks.

This is done by editing the .eslintrc file in VS Code, a configuration file for the setting of ESLint:

 "rules": {
"quotes": [
"error",
"backtick"
]

This adds a rule for quotes, which returns either an error or warning and then has a setting of what to make sure the quotes are set to in this case a backtick.

To disable ESLint in a file you can just add a comment at the top of the JavaScript file:

// eslint disable

Issue

Although there is an issue that at present I can't fix, so any help would be awesome.

If I have single quotes, when I save they are converted to backticks correctly. When I have double quotes, when I save they are converted to single quotes. Which means that I have to save twice to change double quotes into backticks.