The Basics of JavaScript Strings Tutorial

The Basics of JavaScript Strings Tutorial

Learn the Basics of Javascript Strings

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, and concatenate strings and we’ll see some fundamental syntax rules that apply to strings.

Creating Strings There are three ways to write a string — 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 superpowers 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 to 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 long 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 are 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.

If you liked this post, make sure to follow me on Twitter where I post daily about Tech related things!

buymeacoffee.com/rembertdesigns

🌎 Let's Connect

Did you find this article valuable?

Support Richard Rembert by becoming a sponsor. Any amount is appreciated!