JavaScript #11 — String Variables
These JavaScript articles are written for people who are interested in coding and are meant to provide an introduction to the programming world.
You are going to learn various ways to define and work with string variables in this article.
Text/String variables
Text variables are called string variables in programming. String and text are used interchangeably from now on because they are the same thing. Learn more about the strings on Wikipedia.
The text variables are used a lot in programming and there are few ways to define them:
- Quotes symbol,
let name = "Jimmy" - Apostrophe,
let name = 'Jimmy' - Backtick a.k.a Backquote,
let name = `Jimmy`
Note: Backquote is not a symbol that is used often, so here is where to find it on a keyboard (here is the guidance for other keyboard layouts).
The grammar of text variables is the following:
- A text has to start and end with the same kind of symbol: quote, apostrophe or backquote.
- A text value cannot contain an additional quote if it is defined by quotes. The same applies to apostrophes and backquotes.
- A text value cannot start a text variable with a quote and end it with an apostrophe. This is required because the computer, that is interpreting and running your code, has to know where you started defining the text and where is the end of the text.
Open VS Code, create a new HTML file, and try to create string variables using all the three ways.
<script>
let name1 = "Jimmy 1"
let name2 = 'Jimmy 2'
let name3 = `Jimmy 3` console.log(name1)
console.log(name2)
console.log(name3)
</script>
Escaping special characters
Imagine you need to work with a text variable that contains quotes. An example could be I think, "It is what it is".. We might try to do the following but it is against the grammar of text variables — a text value cannot contain a quote if it starts and ends with a quote.
One way to fix the issue with inner quotes is to use some other starting and ending symbol to define the text value. If a text value contains quotes, we can use apostrophes to define it.
<script>
let text = 'I think, "it is what it is".'
console.log(text)
</script>
If the text value contains an apostrophe, we can use quotes to define it.
<script>
let text = "I think, 'it is what it is'."
console.log(text)
</script>If the value contains both apostrophe and quotes, we can use backquotes to define it.
<script>
let text = `I think, "it is what it is".`
console.log(text)
</script>If the text value contains both quotes and apostrophes, we can still use backquotes.
<script>
let text = `I think, 'it is what it is".`
console.log(text)
</script>If the text value contains all three types, we have to start escaping. Escaping is a mechanism to tell the programming language to continue reading string without taking the symbol as an ending symbol. Escaping is done using \ (back-slash) symbol that is placed in front of the escaped symbol.
<script>
let text = "I think, this example of using `, \"That's a bit crazy\"."
console.log(text)
</script>
Escaping can be also used in the following example,
let text = 'Hi \'Jimmy\'.'but it is a good practice to use the starting and ending symbols that do not conflict with the ones inside the text because it makes code more readable.
Connecting strings
It is possible to connect two or more text variables. The connecting is done using the + symbol.
It might feel weird, but JavaScript uses
+for both adding up two numbers together and for connecting two strings as well.
Open VS Code editor and try out the following example.
<script>
let name = "Jimmy"
let greeting = "Hello"
let message = name + " " + greeting
console.log(message)
</script>Connecting strings with + symbol can become hard to read when we connect more than a couple of strings. It is more convenient to use backquotes and inject variables into the string that is defined by backquotes using ${} construct. When ${} is used in the backquotes string to inject a value, then the string is called String template.
<script>
let name = "Jimmy"
let greeting = "Hello"
let message = `${name} ${greeting}`
console.log(message)
</script>Multi-line string
It is possible to define a multi-line string using + symbol that connects lines together. A new line needs to inserted into the string as \n symbol.
<script>
let multiLine = "Hi there\n"
multiLine += "this is a multi-line string\n"
multiLine += "where we can put as many lines as we need to" console.log(multiLine)
</script>
The other, more convenient way to define a multi-line string without connecting lines with + symbol, is to use backquote.
<script>
let multiLine = `Hi there
this is a multi-line string
where we can put as many lines as we need to` console.log(multiLine)
</script>
Final words
Now you can work with string values. This will be very useful later on when we start working on more interactive programs that are going to take values from users and show them some values back.
