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"