Строки

В JavaScript любые текстовые данные являются строками. Однако, не забывайте, что в строке могут быть записаны и числа. Пожалуй, из всех типов данных строками вы будете пользоваться наиболее часто. Разберем все варианты создания новой строки.

Видео

Одинарные или двойные кавычки

Для создания строки используются либо ‘одинарные’, либо “двойные” кавычки.

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

Можно пользоваться и теми, и другими, главное, если вы начинаете строку одинарной, хотя внутри могут быть двойные, завершить ее надлежит также одинарной. И, соответственно, с двойными кавычками.

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

Обратный слэш

Если внутри строки используются те же кавычки, что стоят и снаружи, то их нужно экранировать при помощи обратного слэша - так называемого «символа экранирования». Он добавляется ➕ перед входящей в строку кавычкой \', чтобы она не обозначала окончание строки.

Интерактивный редактор

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

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

Результат

Loading...

Заметим, что обратный слеш \ служит лишь для корректного прочтения строки интерпретатором, но он не записывается в строку после её прочтения. Когда строка сохраняется в оперативную память, в неё не добавляется ➕ символ \. Вы можете явно увидеть это в выводах.

Обратные кавычки

В написании строки можно обойтись и без обратного слэша, если использовать `обратные` кавычки.

Одинарные и двойные кавычки работают, по сути, одинаково, а если использовать обратные кавычки, то в такую строку мы сможем вставлять произвольные JavaScript выражения, обернув их в символ доллара с фигурными скобками ${…} :

Интерактивный редактор

function learnJavaScript() { let name = 'Марк' return `Привет, ${name}!` }

function learnJavaScript() {
  let name = 'Марк'
  return `Привет, ${name}!`
}

Результат

Loading...

Интерполяция строк - это удобный способ подставлять значения переменных в строки. Шаблонная строка это тоже самое, что и интерполяция. Шаблонная строка в ES6 пришла на замену обычной строке. Интерполяция работает только с обратными кавычками. Посмотрим на практике, какие правила существует при использовании интерполяций.

Еще одно преимущество обратных кавычек – они могут занимать более одной строки.

Интерактивный редактор

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

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

Результат

Loading...

Многострочные строки также можно создавать с помощью одинарных и двойных кавычек, используя так называемый «символ перевода строки», который записывается как \n. Все спецсимволы, в JavaScript, начинаются с обратного слеша \ Правда проверить мы это можем в консоле браузера(LIVE EDITOR отображает не корректно).

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

guestList // список гостей, состоящий из нескольких строк

Строки неизменяемы

Содержимое строки в JavaScript нельзя изменить. Нельзя взять символ посередине и заменить его. Как только строка создана — она такая навсегда. Можно создать новую строку и записать её в ту же самую переменную вместо старой.

Интерактивный редактор

function learnJavaScript() { let str = 'Hi' str = 'P' + str[1] // заменяем строку return str }

function learnJavaScript() {
  let str = 'Hi'
  str = 'P' + str[1] // заменяем строку
  return str
}

Результат

Loading...

Популярные методы строк

Длина строки

Свойство length возвращает количество кодовых значений в строке.

Интерактивный редактор

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

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

Результат

Loading...

Обратите внимание, \n — это один спецсимвол, поэтому здесь всё правильно: длина строки 3.

Доступ к символам

Существует два 2️⃣ способа добраться до конкретного символа в строке. В первом способе используется метод charAt(). Первый 1️⃣ символ занимает нулевую позицию:

Интерактивный редактор

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

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

Результат

Loading...

Получить символ также можно с помощью квадратных скобок:

Интерактивный редактор

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

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

Результат

Loading...

Квадратные скобки — современный способ получить символ, в то время как charAt существует в основном по историческим причинам.

Изменение регистра символов

Чтобы преобразовать буквы строки в заглавные, используйте метод toUpperCase().

Интерактивный редактор

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

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

Результат

Loading...

в строчные toLowerCase()

Интерактивный редактор

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

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

Результат

Loading...

Конкатенaция(сцепление) строки

Чтобы построить строку из существующих строк, используйте знак плюс + для объединения строк.

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

Вот мы и познакомились с самым популярным типом данных в JavaScript и самыми часто используемыми методами к нему.

React Native

Посмотрим на практический пример как мы можем использовать строки при создании мобильного приложения. Здесь мы создаем константу str и присваиваем ей значение Hello world. Напомню, что для того чтобы в синтаксис JSX вставлять JavaScript выражения, необходимо использовать фигурные скобки.

Проблемы?

Пишите в Telegram или ВКонтакте, а также подписывайтесь на наши новости

Вопросы:

Как в JavaScript не записываются строки ___?

1. в одинарных кавычках
2. в обратных слэшах
3. в обратных кавычках

Для чего в строке не используется обратный слэш?

1. Для экранирования
2. Для записи спецсимволов
3. Для окончания строки

Выберете «символ перевода строки»

1. \n
2. \
3. \*

Какую букву вернет 'sport'[3]?

1. o
2. r
3. Ничего не вернет

Как изменить символ в строке JavaScript?

1. Изменить строку
2. Добраться до символа и заменить его
3. Создать новую строку и записать её в ту же самую переменную вместо старой

Какой метод используется, чтобы сделать буквы заглавными?

1. toUpperCase()
2. toLowerCase()
3. toLowercase()

Какой знак используется для объединения строк?

1. =
2. +
3. +=

Всякий раз, когда у вас есть открывающая ____, вам всегда нужно иметь закрывающую ____.

1. точка
2. кавычка
3. переменая

Строка состоит из одного или нескольких отдельных ___.

1. символов
2. аргументов
3. параметров

Для того чтобы понять, на сколько вы усвоили этот урок, пройдите тест в мобильном приложении нашей школы по этой теме или в нашем телеграм боте.

Сcылки:

1. MDN web docs
2. Код для подростков: прекрасное руководство по программированию для начинающих, том 1: Javascript - Jeremy Moritz
3. JavaScript.ru

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Alena Yanbukhtina

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋