Строки

В 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 выражения, необходимо использовать фигурные скобки.

Проблемы?

Пишите в Discord или телеграмм чат, а также подписывайтесь на наши новости

Вопросы:

Как в 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 🐛 🎨 🖋