Strings

A string type is a sequence of characters.

It can be also defined as a string literal, which is enclosed in quotes or double quotes:

'A string'
"Another string"

There’s little to no difference in using one or the other. The only difference lies in having to escape the quote character you use to delimit the string:

const test = 'test'
const test = 'te\'st'
const test = 'te"st'
const test = "te\"st"
const test = "te'st"

There are various style guides that recommend always using one style vs the other.

I personally prefer single quotes all the time, and use double quotes only in HTML.

You assign a string value to a variable like this:

const name = 'Flavio'

You can determine the length of a string using the length property of it:

'Flavio'.length //6
const name = 'Flavio'
name.length //6

This is an empty string: ''. Its length property is 0:

''.length //0

A single character can be represented in JavaScript using a string with 1 character in it:

'c'.length //1
const character = 'c'
c.length //1

Two strings can be joined using the + operator:

"A " + "string"

You can do this with variables too:

const name = 'Flavio'
"My name is " + name //My name is Flavio

Template literals

Template literals is the term to identify another way to define strings, introduced in 2015. Use backticks instead of single or double quotes:

const a_string = `something`

They are unique because they provide a lot of features that normal strings built with quotes do not, in particular:

• they offer a great syntax to define multiline strings
• they provide an easy way to interpolate variables and expressions in strings
• they allow you to create DSLs with template tags (DSL means domain specific language and it’s, for example, used in React by Styled Components, to define CSS for a component)

Let’s dive into each of these in detail.

Multiline strings

Pre-ES6, to create a string spanning over two lines you had to use the \ character at the end of a line:

const string =
  'first part \
second part'

This allows to create a string on 2 lines, but it’s rendered on just one line:

first part second part

To render the string on multiple lines as well, you explicitly need to add \n at the end of each line, like this:

const string =
  'first line\n \
second line'

or

const string = 'first line\n' + 'second line'

Template literals make multiline strings much simpler.

Once a template literal is opened with the backtick, you just press enter to create a new line, with no special characters, and it’s rendered as-is:

const string = `Hey
this

string
is awesome!`

Keep in mind that space is meaningful, so doing this:

const string = `First
                Second`

is going to create a string like this:

First
                Second

an easy way to fix this problem is by having an empty first line, and appending the trim() method right after the closing backtick, which will eliminate any space before the first character:

const string = `
First
Second`.trim()

Interpolation

Template literals provide an easy way to interpolate variables and expressions into strings.

You do so by using the ${...} syntax:

const var = 'test'
const string = `something ${var}` //something test

inside the ${} you can add anything, even expressions:

const string = `something ${1 + 2 + 3}`
const string2 = `something ${foo() ? 'x' : 'y'}`

Escaping

A string can contain escape sequences that can be interpreted when the string is printed, like \n to create a new line:

'I am\na developer'

The backslash is also useful when you need to enter, for example, a quote in a string enclosed in quotes, to prevent the char to be interpreted as a closing quote:

'I\'m a developer'

Common escaping sequences include:

Sequence	Description
\n	New line character
\r	Carriage return character
\t	Tab character
\"	Double quote character
\'	Single quote character
\\	Backslash character
\uXXXX	Unicode character

We’ll talk about Unicode later.

Transform a string into an array using the spread operator

You can expand a string using the spread operator ..., which creates an array with each character in the string:

const hey = 'hey'
const arrayizedHey = [...hey] // ['h', 'e', 'y']

This operator has some pretty useful applications. The most important one is the ability to use an array as function argument in a very simple way:

const f = (foo, bar) => {}
const a = [1, 2]
f(...a)

String methods

A string value has useful methods attached to it, which we can use to perform a wide variety of operations.

We’ll analyze each one of them in the “Standard Library” section. By Standard Library we mean the built-in features that the language provides. That section goes deep into listing them all and providing nice examples.

---

Go to the next lesson