DEV Community

Cover image for The Basics of JavaScript Strings Tutorial
Richard Rembert
Richard Rembert

Posted on • Edited on

The Basics of JavaScript Strings Tutorial

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:
Javascript Strings
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.
Javascript Const
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:
Javascript Const
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,
Template Literals
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:
Javascript Syntax
The additional apostrophe in ’G’day Richard!' 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:
Javascript Syntax
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:
Javascript Syntax
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:
Javascript Syntax
Using Template Literals

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

Longer Strings

We use either the newline character \n or carriage return \r, to break longer strings up over multiple lines:
Javascript Strings
This works fine but it’s quite messy. We could tidy it up by using some concatenation:
Javascript Strings
Or go for a gold star with template literals:
Javascript Strings
Back-ticks to the rescue! No escapes or concatenation required, the newlines are preserved and it looks much neater.

Summary

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.

Conclusion

If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
Buy Me A Coffee If you enjoyed this article & would like to leave a tip — click here

🌎 Let's Connect

Top comments (0)