Строки в JavaScript: полное руководство

Раздел: JavaScript -> Основы работы с текстом

Работа с текстом в JavaScript

Как эффективно создавать строки с динамическими значениями?

Наиболее современный способ - использование шаблонных строк (template literals). Они заключаются в обратные кавычки (`) и позволяют встраивать выражения через ${...}.

const name = 'Мир';
const greeting = `Привет, ${name}!`;
console.log(greeting); // Привет, Мир!

Js текст (текст в javascript)

Типичная ошибка: забыть обратные кавычки или использовать одинарные/двойные кавычки - тогда интерполяция не сработает и ${name} останется как текст.

const wrong = 'Привет, ${name}!'; // выведет Привет, ${name}!

Как объединить строки без шаблонов?

Классический способ - конкатенация с помощью оператора +.

const word1 = 'Hello';
const word2 = 'World';
const result = word1 + ' ' + word2;
console.log(result); // Hello World

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

console.log(1 + '2'); // '12', а не 3

Как экранировать специальные символы в строке?

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

const quote = 'Он сказал: \"Привет\"';
console.log(quote); // Он сказал: "Привет"

Ошибка: если забыть экранирование, строка прервется досрочно. В шаблонных строках эта проблема решается проще, так как кавычки внутри не конфликтуют.

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

Методы toUpperCase() и toLowerCase() возвращают новую строку.

const text = 'JavaScript';
console.log(text.toUpperCase()); // JAVASCRIPT
console.log(text.toLowerCase()); // javascript

Эти методы не изменяют исходную строку, а создают новую - это часто путают новички. Регистр символов в исходной строке остаётся прежним.

Как получить длину строки и отдельные символы?

Свойство length хранит количество символов. Доступ к символу - по индексу в квадратных скобках или метод charAt().

const lang = 'JS';
console.log(lang.length); // 2
console.log(lang[0]); // J
console.log(lang.charAt(1)); // S

Если индекс выходит за пределы, квадратные скобки возвращают undefined, а charAt() - пустую строку. Это различие важно учитывать.

Расширенные примеры работы с текстом

Ниже приведены более сложные сценарии, которые часто встречаются на практике.

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

Шаблонные строки позволяют создавать текст с переносами без конкатенации.

Пример

const multiline = `Первая строка
Вторая строка
Третья строка`;
console.log(multiline);
/* Вывод:
Первая строка
Вторая строка
Третья строка
*/

Интерполяция сложных выражений

Внутри ${...} можно использовать любые JavaScript-выражения: вызовы функций, тернарные операторы, математические операции.

Пример

const a = 10, b = 3;
const result = `Сумма: ${a + b}, произведение: ${a * b}, условие: ${a > b ? 'да' : 'нет'}`;
console.log(result); // Сумма: 13, произведение: 30, условие: да

Тегированные шаблоны (tagged templates)

Позволяют обрабатывать шаблонную строку пользовательской функцией, которая получает массив частей строки и значения.

Пример

function tag(strings, ...values) {
  let result = '';
  strings.forEach((str, i) => {
    result += str + (values[i] || '');
  });
  return result.toUpperCase();
}
const name = 'Мир';
const tagged = tag`Привет, ${name}!`;
console.log(tagged); // ПРИВЕТ, МИР!

Работа с кодировками: экранирование Unicode и escape-последовательности

JavaScript поддерживает Unicode, можно задавать символы через \uXXXX или \u{XXXXX} в шаблонных строках.

Пример

const emoji = '\u{1F60A}';
console.log(emoji); // ?
const cry = '\u{1F622}';
console.log(`Грустный смайлик: ${cry}`); // Грустный смайлик: ?

Использование метода repeat() для повторения строки

Полезно для создания разделителей или визуальных эффектов.

Пример

const line = '='.repeat(20);
console.log(line); // ====================
const pattern = 'AB'.repeat(3);
console.log(pattern); // ABABAB

Разделение и объединение строк с помощью split() и join()

Метод split() разбивает строку по разделителю и возвращает массив. join() делает обратное.

Пример

const csv = 'apple,banana,grape';
const fruits = csv.split(',');
console.log(fruits); // ['apple', 'banana', 'grape']
const back = fruits.join(' | ');
console.log(back); // apple | banana | grape

Результат split() может содержать пустые строки, если в исходной строке есть начальный или конечный разделитель.

Пример

const data = ',a,b,';
console.log(data.split(',')); // ['', 'a', 'b', '']

Текст в JavaScript - comments

Js текст (javascript)