In our starter files, open the index.html page from this lessons folder:
01.JavaScript Basics > 03.Working with strings
Our starter file for this part should look familiar by now:
<body>
<h1 id="title">Working with strings</h1>
<script>
document.getElementById('title').innerText = 'something else'
</script>
</body>
Previosly setting the innerText, we have been adding it between these quotes as we have with the text of ‘something else’.
In JavaScript, this is what is known as a string, and a string is basically some text. It can be a single character, a word, sentence, or paragraph, inside of single or double quotes. It makes no difference if single or double quotes are used in this case, however, there will be a problem if one of the words inside also uses the same symbol.
For example, many words contain an apostrophe like this:
document.getElementById('title').innerText = 'let's go!!!'
Immediately, your text editor may highlight a problem if you type this. Rather than the string being in between the outside quotes, it is now matching the first pair (‘let’), and the rest is creating an error.
There are a couple of ways we can deal with this, first, we can change the outer quotes to be the opposite and make them double quotes:
"let's go!!!"
Or, we could return them back to single, then add a backslash in front to escape the character we want to display:
'let\'s go!!!'
Escaping also works for other characters such as double quotes:
'let\”s go!!!'
But what if we wanted to display this backslash in the browser too? For this we add a double backslash to escape this:
'let\\”s go!!!'
If we have a lot of text, we sometimes want to break it up onto multiple lines. If we had a section like this:
document.getElementById("title").innerText =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt lacus at eros vestibulum rhoncus. Quisque sagittis eros non ornare convallis. Nulla eget porta turpis. Maecenas sit amet nunc eget sapien luctus ornare auctor vel massa. Aliquam erat volutpat. Nunc vel dictum risus. Suspendisse diam velit, feugiat et placerat eget, porttitor vitae nunc. Phasellus blandit.";
In the browser, this will automatically wrap onto new lines depending on the width of the browser.
\nIf we want control over these line breaks, we can use \n, as many times as we want:
document.getElementById("title").innerText =
"Lorem ipsum dolor sit amet, \n consectetur adipiscing elit. Fusce tincidunt lacus at eros vestibulum \n rhoncus…
The text after each \n will begin on a new line. Something to be careful of is we can’t have a string split over multiple lines, like this:
document.getElementById("title").innerText =
"Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Fusce tincidunt lacus at eros
vestibulum rhoncus. Quisque
sagittis eros non ornare convallis.";
This will cause and error. We have multiple ways we can deal with this, one is to surround each line in quotes, then join them using the addition operator (+):
document.getElementById("title").innerText =
"Lorem ipsum dolor sit amet," +
"consectetur adipiscing elit." +
"Fusce tincidunt lacus at eros" +
"vestibulum rhoncus. Quisque" +
"sagittis eros non ornare convallis.";
Or, we can use template literals, which uses backticks in place of quotes:
document.getElementById("title").innerText =
`Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Fusce tincidunt lacus at eros
vestibulum rhoncus. Quisque
sagittis eros non ornare convallis.`;
Template literals were introduced in ES2015 and allow us to write multi-line strings, along with some other benefits we will look at later.
Later we will also look deeper into strings and discover available properties and methods.