JavaScript strings are used for storing and manipulating text — they can consist of a sequence of letters, numbers and/or symbols. In this article, we’re going to first take a look at how we create strings, concatenate strings and we’ll see some fundamental syntax rules that apply to strings.

Creating Strings

There are three ways to write a string — with single quotes ‘ ’, double quotes “ ” or back-ticks ` `. Let’s assign some strings to a myString variable with each technique:

let myString = 'I am a string!';
let myString = "I am a string!";
let myString = `I am a string!`;

There is no syntactic difference between single or double quotes, you’re free to go with your preference — however it’s a good idea to stay consistent within your projects! However, back-ticks (known as template literals), have a few super powers which we’ll be taking a look at later in the article.

And of course the reason we assign strings to variables, is so they’re much easier to work with & manipulate within our programs!

Concatenation

We use string concatenation to combine two or more strings together to form a new string. We combine our strings using the + operator.

const firstName = 'Barry';
const secondName = 'Dingus';

const concat = firstName + secondName;

console.log(concat);    

// output: BarryDingus

Here we’ve combined two strings stored in separate variables into a new concat variable. However, you’ll notice we have no space between the names in our new variable as concatenation joins strings end to end. To add the space, use a pair of quotes ‘ ’ like so:

const concat = firstName + ' ' + secondName;

console.log(concat);

// output: Barry Dingus

Now we have our desired output!

Concatenation with Template Literals

When we use template literals ` `, we no longer need to use the + operator to concatenate. We include expressions and variables within our strings using the ${} syntax . For example,

const fullName = 'Barry Dingus';
const location = 'Mullet Creek';

const concat2 = `Welcome ${fullName}! We think ${location} is alright!`;

console.log(concat2);

// output: Welcome Barry Dingus! We think Mullet Creek is alright!

Template literals are much easier read & write.

Syntax Rules

Using Quotes and Apostrophes

Knowing that quotes “ and apostrophes ‘ are interpreted by JavaScript to mark where a string begins & ends. How can we include them within a string? For example:

const greeting = 'G'day Barry!';

console.log(greeting);

// Uncaught Syntax Error: Unexpected identifier

The additional apostrophe in ’G’day Barry!' is the problem. JavaScript thinks ‘G’ is the string and attempts to parse the rest as code, thus generating the error.

Using quotes within a string would cause the same error:

const quote = 'Barry said 'I lost my keys'';

console.log(quote);

// Uncaught Syntax Error: Unexpected identifier

There are a number of ways we can avoid these errors…

Alternate your syntax

Use the opposite quote style to enclose any quotes or apostrophes within your strings, such as:

'G'day Barry!'     // error
"G'day Barry!"     // correct

'Barry said 'I lost my keys''   // error
'Barry said "I lost my keys"'   // correct
"Barry said 'I lost my keys'"   // correct

Whilst this technique works just fine. It’s preferable to be more consistent within our code.

Using the Escape Character \

By using a backslash we can prevent JavaScript from interpreting a quote as the end of the string. The \ should go before any single or double quote:

'G\'day Barry!'   // correct

'Barry said \'I lost my keys\''   // also correct!

Using Template Literals

If we enclose our string in template literals ``, our string will be valid and it’ll look much cleaner too:

`Barry said "I lost my keys" and "I'm now concerned"!`; 

// correct

Longer Strings

We use either the newline character \n or carriage return \r, to break longer strings up over multiple lines:

const multipleLines = "This string is long\nso lets display it\nacross multiple lines.";

// output:

"This string is long
so lets display it
across multiple lines."

This works fine but it’s quite messy. We could tidy it up by using some concatenation:

const multipleLines = "This string is long\n" +
"so lets display it\n" +
"across multiple lines.";

Or go for a gold star with template literals:

const multipleLines = `This string is long
so lets display it
across multiple lines.`;

Back-ticks to the rescue! No escapes or concatenation required, the newlines are preserved and it looks much neater.

Conclusion

And that’s it! We’ve covered the basics of creating strings, string concatenation, and syntax rules. In the next one, we'll move on to manipulating strings with many of the common methods, such as formatting, finding, replacing, and converting values.

Related Posts:

• Working with Strings in JavaScript
• JavaScript Data Types
• JavaScript Data Type Conversion