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:
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.
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:
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 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:
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:
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:
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:
Using Template Literals
If we enclose our string in template literals ``, our string will be valid and it’ll look much cleaner too:
Longer Strings
We use either the newline character \n or carriage return \r, to break long strings up over multiple lines:
This works fine but it’s quite messy. We could tidy it up by using some concatenation:
Or go for a gold star with template literals:
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