Урок · JavaScript

Строки: работаем с текстом

Редакция PraktumОбновлено 24 октября 202615 минут на урок с практикойУровень: новичок

Строка в JavaScript — последовательность символов в кавычках: 'Привет', "Привет" или `Привет`. Строки нельзя изменить по месту: методы trim, toLowerCase, replace и другие возвращают новую строку. Шаблонные строки в обратных кавычках позволяют вставлять переменные через ${…}.

Зачем этот урок сейчас

Почти всё, что человек вводит на странице, — строки: имя, почта, поисковый запрос, сообщение. Их нужно очищать от лишних пробелов, проверять, искать в них, собирать из частей текст для вывода. Строковые методы — ежедневный инструмент в любом интерфейсе.

Создание и шаблонные строки

const a = 'Одинарные кавычки';
const b = "Двойные кавычки";
const name = 'Анна';
const count = 3;

const message = `Привет, ${name}! У тебя ${count} новых урока.`;
const multiline = `Первая строка
Вторая строка`;

Одинарные и двойные кавычки работают одинаково — выбери одни и пиши везде так. Обратные кавычки создают шаблонную строку: внутрь ${…} можно вставить переменную или выражение, а переносы строк сохраняются. Склеивать через + тоже можно, но шаблон читается проще.

Длина и символы

const word = 'JavaScript';

word.length;      // 10
word[0];          // 'J'
word.at(-1);      // 't' — последний
word[100];        // undefined

Индексы начинаются с нуля. Строку нельзя изменить по символу: word[0] = 'j' молча ничего не сделает. Чтобы изменить, создай новую строку.

Эмодзи и некоторые редкие символы занимают две позиции: '👍'.length равно 2. Для подсчёта видимых символов используй [...str].length.

Методы возвращают новую строку

let title = '  Flexbox  ';
title.trim();             // результат потерян
console.log(title);       // '  Flexbox  ' — не изменилась

title = title.trim();     // сохранили результат
console.log(title);       // 'Flexbox'

Это главная ловушка: метод вызван, а строка прежняя. Результат обязательно сохраняй в переменную — новую или ту же самую, объявленную через let.

Основные методы строк

Поиск без учёта регистра

function matches(text, query) {
  return text.toLocaleLowerCase('ru').includes(query.trim().toLocaleLowerCase('ru'));
}

matches('Основы JavaScript', '  java '); // true

Сравнение строк чувствительно к регистру и пробелам: 'Java' === 'java' ложно. Перед поиском очищай запрос через trim и приводи обе строки к одному регистру. toLocaleLowerCase('ru') корректнее обрабатывает буквы конкретного языка.

split и join

const tags = 'html, css, js'.split(', ');   // ['html', 'css', 'js']
const slug = 'Основы HTML'.toLowerCase().split(' ').join('-'); // 'основы-html'
const words = text.trim().split(/\s+/);     // по любым пробелам

split превращает строку в массив, join собирает массив обратно в строку. Между ними удобно применять методы массивов: отфильтровать, отсортировать, преобразовать.

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

const value = '25';          // из поля формы
value + 5;                   // '255' — склейка строк!
Number(value) + 5;           // 30
Number('');                  // 0 — осторожно с пустым полем
Number('12px');              // NaN
parseInt('12px', 10);        // 12
String(42);                  // '42'
(1234.5).toFixed(1);         // '1234.5'

Значение поля формы — всегда строка, даже если человек ввёл цифры. Оператор + со строкой склеивает, а не складывает. Преобразуй явно через Number() и проверяй пустую строку отдельно: Number('') даёт 0, а не ошибку.

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

'ёж' < 'яблоко';                          // false — хотя по алфавиту «ё» раньше «я»
'ёж'.localeCompare('яблоко', 'ru');       // -1 — правильно: «ёж» раньше
['ёж', 'арбуз', 'Банан'].sort((a, b) => a.localeCompare(b, 'ru'));

Операторы < и > сравнивают строки по кодам символов, поэтому «ё» и заглавные буквы встают не на свои места. Для алфавитного порядка используй localeCompare с языком.

Шаблонная строка или склейка

Частые ошибки

• Вызывают trim() и не сохраняют результат.
• Складывают число со строкой из поля и получают склейку «255».
• Ищут без приведения к одному регистру: «Java» не находит «java».
• Сортируют русские слова без localeCompare.
• Вставляют текст пользователя на страницу через innerHTML вместо textContent.

Доступность

Строки, которые видит человек, держи короткими и понятными. Для чисел, дат и цен используй Intl.NumberFormat и Intl.DateTimeFormat — так «1 800 ₽» и «24 октября» будут записаны по правилам языка, и скринридер прочитает их правильно. Сообщения об ошибках пиши текстом, объясняющим, что исправить.

Поддержка браузерами

Методы trim, includes, startsWith, slice, split, padStart, repeat и шаблонные строки работают во всех актуальных браузерах. replaceAll и at — более новые, но тоже поддерживаются современными версиями.

function normalizeEmail(value) {
  return value.trim().toLowerCase();
}

function preview(text, limit = 60) {
  const clean = text.trim().replace(/\s+/g, ' ');
  if (clean.length <= limit) return clean;
  return clean.slice(0, limit).trimEnd() + '…';
}

normalizeEmail('  Anna@Mail.RU ');  // 'anna@mail.ru'