Creating Strings

In JavaScript, you can create strings using single quotes, double quotes, or backticks (template literals):

const single = 'Hello'
const double = "Hello"
const template = `Hello`

All three create the same string value.

Template Literals

Template literals, introduced in ES2015, use backticks and offer powerful features that regular quotes don’t provide.

Multiline Strings

Template literals make multiline strings simple. Just press enter to create a new line:

const string = `Hey
this

string
is awesome!`

With regular quotes, you’d need escape characters:

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

Keep in mind that space is meaningful in template literals:

const string = `First
                Second`

This creates a string with all that whitespace included. To fix this, use trim():

const string = `
First
Second`.trim()

Interpolation

Template literals provide an easy way to interpolate variables and expressions:

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

Inside ${} you can add any expression:

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

Template Tags

Tagged templates let you parse template literals with a function. This feature is used by libraries like Styled Components and Apollo:

const Button = styled.button`
  font-size: 1.5em;
  background-color: black;
  color: white;
`

The tag function receives the literal parts and interpolated values:

function interpolate(literals, ...expressions) {
  let string = ``
  for (const [i, val] of expressions.entries()) {
    string += literals[i] + val
  }
  string += literals[literals.length - 1]
  return string
}

const interpolated = interpolate`I paid ${10}€`

String Immutability

Strings in JavaScript are immutable. When you call a method on a string, it returns a new string rather than modifying the original:

const original = 'Hello'
const upper = original.toUpperCase()

console.log(original) // 'Hello' - unchanged
console.log(upper)    // 'HELLO' - new string

The String Object

The String object has a static method String.fromCodePoint() to create strings from Unicode code points:

String.fromCodePoint(70, 108, 97, 118, 105, 111) //'Flavio'

You can also use octal or hexadecimal numbers:

String.fromCodePoint(0x46, 0154, parseInt(141, 8), 118, 105, 111) //'Flavio'

toString() and valueOf()

These methods return the string representation of a String object:

const str = new String('Test')
str.toString() //'Test'
str.valueOf()  //'Test'

Both methods return the same result.

Lessons in this unit:

0:	Introduction
1:	▶︎ String Basics
2:	Accessing Characters
3:	Searching Strings
4:	Extracting Substrings
5:	Transforming Strings
6:	Modifying Strings
7:	Trimming and Padding
8:	String Recipes
9:	Unicode and UTF-8
10:	Printable ASCII characters list
11:	Non-printable ASCII characters list