Строки в JavaScript #

Строка — последовательность символов Unicode в типе string. В JS строки неизменяемы: любой «изменяющий» метод возвращает новую строку. Имена товаров, slug плейлиста, адрес доставки и сообщения чекаута почти всегда проходят через строковые операции.

Литералы и экранирование #

const productName = 'Клавиатура MX'
const playlistTitle = "Focus — Deep Work"
const legalNote = 'Строка с \'кавычками\' внутри'

const multiline = `Строка
на нескольких
строках`

Обратный слэш экранирует спецсимволы:

const path = 'C:\\projects\\jsflow'
const tabbed = 'колонка1\tколонка2'
const newline = 'первая\nвторая'

Шаблонные строки (template literals) #

Обратные кавычки позволяют вставлять выражения через ${...}:

const track = 'Night Drive'
const artist = 'Lumen'
const label = `${artist} — ${track}` // "Lumen — Night Drive"

const eta = 18
const status = `Курьер будет через ${eta} мин`

Многострочные шаблоны без конкатенации:

function checkoutSummary({ items, total }) {
  return `Заказ: ${items} поз.
Итого: ${total} ₽`
}

Вложенные выражения приводятся к строке автоматически (см. Преобразование типов).

Длина и доступ по индексу #

const sku = 'KB-01-XL'
sku.length // 8

sku[0] // "K"
sku[sku.length - 1] // "L"

Индексация через [i] не даёт ошибку за пределами — вернёт undefined:

sku[99] // undefined

Для последнего символа в старых средах иногда используют charAt, но str[i] читается проще:

sku.charAt(0) // "K"

Поиск и проверка содержимого #

const haystack = 'delivery-express-moscow'

haystack.includes('express') // true
haystack.startsWith('delivery') // true
haystack.endsWith('moscow') // true

haystack.indexOf('express') // 9 — позиция или -1
haystack.lastIndexOf('-') // 17

Проверка без учёта регистра — нормализуйте обе стороны:

function slugMatches(input, slug) {
  return input.trim().toLowerCase() === slug.toLowerCase()
}

slugMatches('  FOCUS-Tracks  ', 'focus-tracks') // true

Извлечение частей: slice, substring #

const orderId = 'ord-2026-0412-7f3a'

orderId.slice(4, 8) // "2026" — конец не включается
orderId.slice(-4) // "7f3a" — с конца

orderId.substring(4, 8) // "2026" — похоже, но отрицательные индексы ведут себя иначе

slice предпочтительнее: поддерживает отрицательные индексы и ведёт себя предсказуемо.

Регистр и пробелы #

const rawTitle = '  Summer Hits  '

rawTitle.trim() // "Summer Hits"
rawTitle.trimStart() // "Summer Hits  "
rawTitle.trimEnd() // "  Summer Hits"

'checkout'.toUpperCase() // "CHECKOUT"
'RUB'.toLowerCase() // "rub"

Для отображения в UI иногда нужна только первая заглавная:

function capitalize(word) {
  if (!word) return ''
  return word[0].toUpperCase() + word.slice(1).toLowerCase()
}

capitalize('москва') // "Москва"

split, join, replace #

Разбить строку на массив:

const tags = 'focus,work,instrumental'
tags.split(',') // ["focus", "work", "instrumental"]

'abc'.split('') // ["a", "b", "c"]

Собрать обратно:

['focus', 'work'].join(' · ') // "focus · work"

Замена: replace меняет первое вхождение; для всех — регулярное выражение с флагом g:

const phone = '+7 (999) 111-22-33'
phone.replace(/\D/g, '') // "79991112233" — только цифры

const label = 'цена: 1500 руб'
label.replace('руб', '₽') // "цена: 1500 ₽"

replaceAll (ES2021) заменяет все вхождения без regex:

'one-one'.replaceAll('one', '1') // "1-1"

padStart и padEnd #

Выравнивание и фиксированная ширина в логах или чеках:

String(7).padStart(2, '0') // "07" — минуты в таймере
'490'.padEnd(6, '.') // "490..."

function formatLineIndex(n) {
  return String(n).padStart(2, '0')
}

formatLineIndex(3) // "03"

Строки и числа #

Конкатенация + приводит к строке, если один операнд — строка:

'Заказ №' + 904 // "Заказ №904"

Явное приведение делает намерение видимым:

`Заказ №${904}` // "Заказ №904"
String(904) // "904"

Не смешивайте без нужды: '2' + 2 даст "22", а '2' - 1 даст 1.

Сравнение строк #

'a' < 'b' // true — лексикографически по кодам UTF-16
'яблоко' < 'язык' // зависит от локали; для сортировки UI используйте localeCompare

const tracks = ['Бета', 'Альфа', 'Вета']
tracks.sort((a, b) => a.localeCompare(b, 'ru')) // ["Альфа", "Бета", "Вета"]

Для идентификаторов (slug, sku) чаще нужно побайтовое сравнение без локали — тогда достаточно === или localeCompare с 'en'.

Практика: нормализация адреса доставки #

function normalizeAddress(input) {
  return input
    .trim()
    .replace(/\s+/g, ' ')
    .split(',')
    .map((part) => part.trim())
    .filter(Boolean)
    .join(', ')
}

normalizeAddress('  ул. Пример,  д. 5 ,  кв. 12  ')
// "ул. Пример, д. 5, кв. 12"

function maskCardLast4(pan) {
  const digits = pan.replace(/\D/g, '')
  const last4 = digits.slice(-4)
  return `**** ${last4}`
}

maskCardLast4('4111 1111 1111 4242') // "**** 4242"

Итог #

Строки в JS неизменяемы; методы возвращают новые значения.
Шаблонные литералы с ` и ${} — основной способ сборки текста с данными.
trim, toLowerCase, includes, split/join закрывают большую часть задач форм и API.
slice предпочтительнее substring для вырезания подстрок.
Для сортировки по-русски используйте localeCompare, для slug — строгое равенство и нормализация.