Strings

In JavaScript, any text data is strings. However, do not forget that numbers can also be written in a string. Of all the data types, you will probably use strings the most. Let's analyze all the options for creating a new line.

Single or double quotes

Either ‘single’ or “double” quotes are used to create strings.

let single = 'Hello World'
let double = "Hello World" // prettier-ignore

You can use both of them, the main thing is that if you start a line with a single one, although there may be doubles inside, it must also be completed with a single one. And, accordingly, with double quotes.

let double = "Don't you think so, d'Artagnan?"
let single = '"I think so, indeed!" - cried he.'

Backslash

If the same quotes are used inside the string as outside, then they must be escaped with a backslash - the so-called "escape character". It is appended ➕ before the enclosing quotation mark `\ '' so that it does not indicate the end of the line.

Live Editor

// prettier-ignore function learnJavaScript() { let backticks = 'It\'s not complicated' return backticks }

// prettier-ignore
function learnJavaScript() {
  let backticks = 'It\'s not complicated'
  return backticks
}

Result

Loading...

Note that the backslash \ is only used to correctly read the string by the interpreter, but it is not written to the string after it has been read. When a string is saved to main memory, the \ character is not added to it. You can clearly see this in the findings.

Back quotes

In writing a string, you can do without a backslash by using \ back \ quotes.

Single and double quotes work essentially the same way, and if you use back quotes, we can insert arbitrary JavaScript expressions into such a string by wrapping them in a dollar sign with curly braces $ {...} :

Live Editor

function learnJavaScript() { const sum = (a, b) => a + b // this is a function, we'll get to know it later in the course return `1 + 2 = ${sum(1, 2)}` }

function learnJavaScript() {
  const sum = (a, b) => a + b // this is a function, we'll get to know it later in the course
  return `1 + 2 = ${sum(1, 2)}`
}

Result

Loading...

Another advantage of backticks is that they can span more than one line.

Live Editor

function learnJavaScript() { let guestList = `Guests: * John * Pete * Mary ` return guestList }

function learnJavaScript() {
  let guestList = `Guests:
    * John
    * Pete
    * Mary
   `
  return guestList
}

Result

Loading...

Multiline strings can also be created with single and double quotation marks, using the so-called "line feed" character, which is written as \ n. All special characters, in JavaScript, begin with a backslash \ True, we can check this in the browser console (LIVE EDITOR does not display correctly).

let guestList = 'Guests:\n * John\n * Pete\n * Mary'

guestList // multi-line guest list

Strings are immutable

The content of a string in JavaScript cannot be changed. You cannot take the symbol in the middle and replace it. Once a string is created - it is like that forever. You can create a new string and write it to the same variable instead of the old one.

Live Editor

function learnJavaScript() { let str = 'Hi' str = 'P' + str[1] // replace string return str }

function learnJavaScript() {
  let str = 'Hi'
  str = 'P' + str[1] // replace string
  return str
}

Result

Loading...

Popular string methods

String length

The length property returns the number of code values in the string.

Live Editor

function learnJavaScript() { let str = 'My\n'.length return str }

function learnJavaScript() {
  let str = 'My\n'.length
  return str
}

Result

Loading...

Please note that \ n is one special character, so everything is correct here: the length of the string is 3.

Access to symbols

There are two 2️⃣ ways to get to a specific character in a string. The first method uses the charAt () method. The first 1️⃣ character is at position zero:

Live Editor

function learnJavaScript() { let str = 'cat'.charAt(2) return str }

function learnJavaScript() {
  let str = 'cat'.charAt(2)
  return str
}

Result

Loading...

You can also get a symbol using square brackets:

Live Editor

function learnJavaScript() { let str = 'cat'[2] return str }

function learnJavaScript() {
  let str = 'cat'[2]
  return str
}

Result

Loading...

Square brackets are the modern way to get a character, while charAt exists mainly for historical reasons.

Change case of characters

To convert the letters of a string to uppercase, use the toUpperCase () method.

Live Editor

function learnJavaScript() { let str = 'Interface'.toUpperCase() return str }

function learnJavaScript() {
  let str = 'Interface'.toUpperCase()
  return str
}

Result

Loading...

to lowercase toLowerCase ()

Live Editor

function learnJavaScript() { let str = 'Interface'.toLowerCase() return str }

function learnJavaScript() {
  let str = 'Interface'.toLowerCase()
  return str
}

Result

Loading...

Concatenate (concatenate) a string

To construct a string from existing strings, use the plus sign + to concatenate the strings.

let name = 'Mary '
let activity = 'drink tea'
let bio = 'Our guest ' + name + activity + '.'
bio // Our guest Mary drink tea.

So we got acquainted with the most popular data type in JavaScript and the most commonly used methods for it.

Problems?

Write to Discord chat.

Questions:

How strings are not written in JavaScript?

1. In single quotes
2. In backslashes
3. In back quotes

Why isn't a backslash used in a string?

1. For shielding
2. To write special characters
3. To end the line

Find the line with the error

1. let str = \ It's not complicated \
2. let str = "'I think so, indeed!' - cried he. "
3. let str = 'My slogan: "Don't worry, be happy!"'

Select "line feed character"

1. \ n
2. \
3. \ *

What letter will 'sport' [3] return?

1. o
2. r
3. Will not return anything

How do I change a character in a JavaScript string?

1. Change the line
2. Get to the symbol and replace it
3. Create a new line and write it to the same variable instead of the old one

What method is used to capitalize letters?

1. 'Interface'.toUpperCase()
2. 'Interface' [0] .toLowerCase()
3. 'Interface'.toLowerCase()

What character is used to concatenate strings?

1. =
2. +
3. + =

In order to understand how much you learned this lesson, take the test in the mobile application of our school on this topic or in our telegram bot.

Links

1. MDN web docs
2. Code for Teens: The Perfect Beginner's Guide to Programming, Volume 1: Javascript - Jeremy Moritz
3. JavaScript.ru

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Alena Yanbukhtina

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋