Перейти к основному содержимому

Строки

@serverSerrverlesskiy

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

Видео#

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

quotation marks

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

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.'

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

shielding

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

Интерактивный редактор
Результат
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

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

Dollar

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

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

Интерактивный редактор
Результат
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

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

Интерактивный редактор
Результат
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

let guestList = 'Guests:\n * John\n * Pete\n * Mary'
guestList // список гостей, состоящий из нескольких строк

console

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

Tree

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

Интерактивный редактор
Результат
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

Длина строки#

Length

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

Интерактивный редактор
Результат
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

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

Door

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

Интерактивный редактор
Результат
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

Интерактивный редактор
Результат
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

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

Capital letter

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

Интерактивный редактор
Результат
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

Интерактивный редактор
Результат
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

Chain

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

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

Проблемы?#

Problem

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

JavaScript Camp

Вопросы:#

Question

Как в 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. параметров

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

Sumerian school

С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

🐛 🎨 🖋

Become a Patron!