The Basics of JavaScript Strings Tutorial
Tags: javascript, beginners, tutorial, webdev
Published: 2022-07-10 20:10:13

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1hrmmjk1pixjoleby0qq.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7m3bm0ahvrji7pqtgazq.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1dd5xq6xj0v7by98jwsm.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/okfgb7zskep2woyypo5n.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2zz5ubtnabhyzn16dppt.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/trc2vvf8t8glvuavqjr9.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4l2jo85vhbhim8po7q42.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3rckc2pfvhgr8di3f5a.png)
**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iuc0rai09renmivsgmet.png)

### Longer Strings
We use either the newline character `\n` or carriage return `\r`, to break longer strings up over multiple lines:
![Javascript Strings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fbzigjoztg6uy0kil2zx.png)
This works fine but it’s quite messy. We could tidy it up by using some concatenation:
![Javascript Strings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rofmgizk487035636w6v.png)
Or go for a gold star with template literals:
![Javascript Strings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x7nvxq5j66hq3j3n48dv.png)
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](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)