If you are new to coding Javascript like me, you may not be familiar with very simple concepts, or even keyboard characters like (`) verses (') or ("). If you are uncertain of the difference, let me help! The first is commonly called a backtick (also known by many other names), the second, an apostrophe or single quote, and the third, a double quotation mark. In my first week of learning javascript, I mixed the first two up and it caused my code to fail numerous times before I figured it out.
Location On the Keyboard
My first issue, after learning single quotes were not backticks, was figuring out where they are located on the keyboard. Just to make this as simple as possible, here are the main locations of each character on the keyboard. Although, you will likely need to search your own keyboard or use Google to verify the location on your keyboard.
Backtick (`): Located on the same key as the "tilde" (~) key, the backtick key is usually located just above the "tab" key, on the left hand side of the keyboard.
Single Quote ('): Located on the same key as the double quote, usually two keys right of the "L" key. Press the key once for a single quote.
Double Quote ("): Located on the same key as the single quote, usually two keys right of the "L" key. Press the key once, while holding the shift key, for a double quote.
How to tell the Difference Between a Backtick (`) and Single Quote (')
The easiest way to tell the difference between a backtick and single quote when looking at code, is to look at how they are standing. A backtick leans to the left. Thus, the reason for the name backtick. A single quote will usually stand straight, or lean to the right, making it easier to identify. The single quote will also sometimes appear bolder than the backtick character.
The Difference Between Single Quotes and Backticks
When I first started to learn to coding in javascript, I was greatly disappointed when I could not get something as simple as interpolation to work. I ended up doing something entirely different until I discovered my error. The reason, I was using single quotes instead of backticks. They looked similar, but according to the computer, they were very different.
How to use Backticks (`), Single Quotes ('), and Double Quotes (')
Single and Double Quotes
Single and double quotes are used in javascript to create strings. Strings store a series of characters between single or double quotation marks. They look something like this:
const string = "String of characters inside double quotes.";
const singleString = 'String of characters inside single quotes.';
Using a Single Quote as an Apostrophe:
What if you wanted to include an apostrophe inside the text in your string? Without some modification, javascript will not differentiate between an apostrophe and a single quote. That's because they are the same character. This is what happens if you try to enter an apostrophe without any other characters.
const apostropheString = 'I know the computer's not going to like this!';
Notice how the string stops at the apostrophe. This is because the computer believes it to be a single quote. In order to show javascript this is intended to be an apostrophe, we must use a backslash () before the apostrophe.
const apostropheString = "The computer\'s going to like this!";
Using Javascript Methods on Strings
A nice feature of using strings in javascript is the fact you can use javascript methods on them. For example, you can have javascript return a specific character (I.e. character 2).
let string = "ABCDEFGH This is the alphabet!";
console.log(string.charAt(0));
console.log(string.charAt(3));
console.log(string.charAt(29));
To reference more javascript methods you can use on strings, visit W3 Schools.
Backticks and Interpolation
Now, the most important reason to find the backtick key, is that you need it for interpolation. Interpolation is a very useful tool when forming strings. It allows you to embed an expression inside a string. You must use the backtick in place of the double or single quotes, and include ${ expression } inside the backticks in order for this to work. After adding these features, interpolation becomes very useful.
For example, you can add two numbers together:
let string = `The sum of 2 and 5 is ${2 + 5}!`;
console.log(string);
Or, you can add one string expression into another string:
const weather = "cloudy";
const string = `The weather is ${weather} today!`;
console.log(string);
The options are really limitless, but make sure to use backticks in order to get interpolation to work.
One Last Tip: Merging Strings Using Concatenation
Strings can also be merged using concatenation. To do this, two or more variables which have been assigned to strings can be placed inside another variable with the plus (+) symbol between them. The return will be one complete string.
const weather = " cloudy";
const string = "The weather is";
const theWeather = string + weather + "!";
console.log(theWeather);
Notice the space between the double quotes and the word 'cloudy' in the first string. This allows for the final string to return like a normal sentence. Spacing can be added in between the quotes and string characters in order to form the string you are looking to create.
Conclusion
Javascript has some great features which make working with strings very easy. By looking into various tips and tricks, these features can be used to create some amazing features in javascript. Don't forget to use the correct characters (double/single quotes, backticks, etc.), because without them a string will not return properly. Have fun and give some of these practices a try!
