JavaScript строки (string)

Строковый литерал
Интерполяция строк
Теговые шаблоны
Длина строки
Нумерация и доступ к символам строки
Строки неизменяемые
Спецсимволы
Конкатенация строк

Тип данных строка (string) используется для представления текста. В JavaScript любые текстовые данные называют строками.

Вне зависимости от того, какая кодировка установлена для страницы, в JavaScript для строк всегда используется кодировка UTF-16 набора символов Unicode. В JavaScript строка — это неизменяемая, упорядоченная последовательность 16-битных значений, каждое из которых обычно представляет символ Unicode.

Строковый литерал

Строковый литерал (кратко строки) представляет собой последовательность из нуля или более символов, заключённую в пару одинаковых кавычек. В JavaScript строка может быть заключена в один из трёх видов кавычек: двойные (" "), одинарные (' ') и обратные (` `):

"Двойные кавычки"
'Одинарные кавычки'
`Обратные кавычки`

Строки, состоящие из нуля символов, называют пустыми:

""	// Пустая строка

Строки, заключённые в одни кавычки, могут содержать внутри символы других кавычек:

"одинарные 'кавычки' и `обратные` внутри двойных"
'а здесь "так" и `так`!'
`а здесь "так" и 'так'!`

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

alert("это всё одна \
длинная \
строка");   // это всё одна длинная строка

alert('это всё одна \
длинная \
строка');   // это всё одна длинная строка

alert(`это всё одна \
длинная \
строка`);   // это всё одна длинная строка

Строки с обратными кавычками имеют особые названия: строки-шаблоны или шаблонные литералы.

Интерполяция строк

Строки с двойными и одинарными кавычками ничем не отличаются между собой по функционалу — они могут содержать лишь текст и спецсимволы.

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

let str = "Мир!";
alert(`Привет, ${str}`);		// Привет, Мир!

alert(`5 + 5 = ${5 + 5}.`);	// 5 + 5 = 10.

Выражение внутри (${...}) вычисляется, и его результат становится частью строкового литерала.

Ещё одной отличительной особенностью строк с обратными кавычками является возможность сохранения всех пробельных символов в тексте:

let nums = `Числа:
1
   2`;

alert(nums);	// Числа:
		// 1
		//   2

Теговые шаблоны

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

тег`шаблонный литерал`

Для примера создадим функцию foo. Первый параметр назовём strings — это будет массив, в который будет передан текст тегового шаблона. Вторым параметром будем использовать так называемый дополнительный параметр — массив, в который будут переданы выражения, встраиваемые в теговый шаблон:

function foo(strings, ...expressions) {
  console.log(strings);
  console.log(expressions);
}

let name = "Земля";
let age = 20;

foo`Я живу на планете ${name} уже ${age} лет.`;

В теговой функции можно как угодно работать с переданными ей аргументами и возвращать всё что угодно:

function foo(strings, ...expressions) {
  let returnStr = ``;
  expressions.forEach((v, i) => {
    returnStr += `${strings[i]}${v}`;
  });

  returnStr += strings[strings.length - 1];

  return returnStr;
}

let name = "Земля";
let age = 20;

console.log(foo`Я живу на планете ${name} уже ${age} лет.`);

Длина строки

Длина строки — это количество содержащихся в ней 16-битных значений (а не самих символов). Длину строки содержит свойство length:

alert("Привет".length );   // 6

Символы Unicode, кодовые точки которых не умещаются в 16 бит, обрабатываются в соответствии с правилами кодировки UTF-16 как последовательности из двух 16-битных значений. Это означает, что длина строки и фактическое количество символов могут не совпадать:

alert("a".length);   // 1 Символ, длина — 1
alert("𝑒".length);   // 1 Символ, длина — 2

Нумерация и доступ к символам строки

Нумерация 16-битных значений в строке начинается с нуля, т. е. первое 16-битное значение находится под индексом 0, второе — под индексом 1 и т. д. Индекс — это порядковый номер.

Получить символ строки (состоящий из одного 16-битного значения) можно с помощью индекса, заключённого в квадратные скобки [индекс]:

let str = "Привет";

alert(str[0]);   // П
alert(str[3]);   // в

Чтобы с помощью индексов обратиться к символу, состоящему из двух 16-битных значений, нужно, используя конкатенацию, написать эти индексы так, чтобы в результате получилась последовательность из двух 16-битных значений:

let str = "𝑒";

alert(str[0] + str[1]);   // "𝑒"

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

В JavaScript строки неизменяемые. Это значит, что в уже существующей строке нельзя менять никакие символы или добавлять новые.

Так как строки неизменяемые, то методы, используемые для работы со строками, возвращают новые строки, а не изменяют ту строку, относительно которой они были вызваны:

let str = "Привет";

alert(str.toUpperCase());	// "ПРИВЕТ" — новая строка
alert(str);	// "Привет" — первоначальная строка

Чтобы изменить строку, можно создать новую строку и записать её в ту же самую переменную вместо старой строки:

let str = "Строка";
str = str.toUpperCase();
alert(str);   // "СТРОКА"

Спецсимволы

Спецсимвол — это последовательность символов, которая обозначает символ, не представимый внутри строки другими способами. Спецсимволы иначе называют управляющими последовательностями или escape-последовательностями.

Символ обратной косой черты (\) в сочетании со следующим за ним символом образует спецсимвол. Например, \n является управляющей последовательностью, которая представляет символ перевода строки:

alert("Числа:\n1\n2\n3");	// Числа:
			// 1
			// 2
			// 3

В таблице ниже представлены управляющие последовательности JavaScript и символы, которые они представляют:

Последовательность	Представляемый символ
`\0`	Символ NUL — пустой символ (`"\u0000"`). В Си-подобных языках программирования представляет последний символ в любой строке. Именно по этому символу компилятор/интерпретатор понимает, где заканчивается строка. В JavaScript находится по историческим причинам, сейчас не используется.
`\t`	Горизонтальная табуляция (`"\u0009"`).
`\n`	Перевод на новую строку (`"\u000A"`).
`\b`	Возврат на одну позицию — то, что происходит при нажатии на клавишу backspace (`"\u0008"`). В JavaScript находится по историческим причинам, сейчас не используется.
`\r`	Возврат каретки (`"\u000D"`). В JavaScript находится по историческим причинам, сейчас не используется.
`\f`	Прогон страницы (`"\u000C"`). Раньше означал разделитель страниц при печати на принтере — вызывает прогон бумаги до начала следующей страницы. В JavaScript находится по историческим причинам, сейчас не используется.
`\v`	Вертикальная табуляция (`"\u000B"`). В JavaScript находится по историческим причинам, сейчас не используется.
`\"`	Двойная кавычка (`"\u0022"`). Используется, если кавычку необходимо вставить в строку, которая заключена в такие же кавычки.
`\'`	Одинарная кавычка (`"\u0027"`). Используется, если кавычку необходимо вставить в строку, которая заключена в такие же кавычки.
\`	Обратная кавычка (`"\u0060"`). Используется, если кавычку необходимо вставить в строку, которая заключена в такие же кавычки.
`\\`	Обратный слэш (обратная косая черта) (`"\u005C"`). Используется, если в строку нужно добавить собственно сам обратный слэш.
`\xnn`	Символ из набора символов ISO Latin-1, заданный двумя шестнадцатеричными цифрами (`n` — шестнадцатеричная цифра `0-F`). Например, `"\x41"` (код буквы `"A"`).
`\unnnn`	Символ из набора символов Unicode, указанный четырьмя шестнадцатеричными цифрами (`n` — шестнадцатеричная цифра `0-F`). Например, `"\u0041"` (код буквы `"A"`).
`\u{n}`	Символ из набора символов Unicode, указанный с помощью кодовой точки `n`, где `n` — от одной до шести шестнадцатеричных цифр между `0` и `10FFFF`. Например, `"\u{41}"` (код буквы `"A"`).

Если символ \ предшествует любому символу, отличному от приведённых в таблице, то он просто игнорируется интерпретатором:

alert("\k");   // "k"

Конкатенация строк

Конкатенация строк — это объединение двух или более строк в одну. Объединение происходит с помощью оператора + (плюс). При конкатенации каждая последующая строка добавляется в конец предыдущей:

let str = "Привет ";
let str2 = "Мир!";

alert(str + str2); // "Привет Мир!"

Значение любого типа, которое объединяется со строкой, будет неявно (автоматически) преобразовано в строку и далее будет произведена конкатенация:

let str = "Текст";

alert(str + 1);     // "Текст1"
alert(true + str);  // "trueТекст"
alert(str + NaN);   // "ТекстNaN"