22 ноября в 19:00 состоится вебинар
"Как открыть для себя новые возможности через современную профессию Frontend разработчика"
Детальнее по ссылке.

Строка (String)

Строка (String)

Строка JavaScript хранит ряд символов, таких как “John Snow”.
Строкой может быть любой текст внутри двойных или одинарных кавычек.

var houseName = "Stark";
var houseName = 'Targaryen';

Индексы строк основаны на нулевом значении: первый символ находится на позиции 0, второй на позиции 1 и т.д.

Вы можете использовать кавычки внутри строки, если они не соответствуют кавычкам строки.

var reply = "It's OK";
var reply = "She is called 'Khaleesi'";
var reply = 'She is called "Khaleesi"';

Специальные символы

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

var text = "We are the so-called "Wolves" from the north."

Строка будет сокращена до «We are the so-called».

Решение данной проблемы заключается в экранирование специальных символов с использованием escape-символа\.
Escape-символ\(обратный слэш) преобразует специальные символы в строковые символы:

var reply = 'It\'s OK';
var text = "We are the so-called \"Wolves\" from the north."

Вот наиболее часто используемые специальные символы, которые могут быть вставлены в текст с помощью экранирования:

Код Результат
\’ Одиночная кавычка
Двойная кавычка
\\ Обратный слэш

 

В JavaScript действуют пять других escape-символов:

Код Результат
\b Backspace
\r Carriage Return (возврат каретки)
\f Form Feed (разделитель, разрыв страницы)
\t Horizontal Tabulator
\v Vertical Tabulator

5 вышепредставленных escape-символов первоначально были предназначены для управления пишущими машинами, телетайпами и факсимильными аппаратами. Они не имеют никакого смысла в HTML.

Разрыв длинных строк кода

Для лучшей читаемости кода, программисты стараются избегать строк кода длиной более 80 символов.
Если JavaScript выражение не помещается в одну строку, лучшее место для разрыва строки — после оператора:

document.getElementById("demo").innerHTML =
"You Know Nothing, Jon Snow";

Вы также можете разбить строку кода в текстовой строке с помощью одного обратного слэша:

document.getElementById("demo").innerHTML = "You Know Nothing, \
Jon Snow";

Метод, с использованием \ , не является предпочтительным. Возможно, у него не будет универсальной поддержки. Некоторые браузеры не допускают пробелы за символом \ .

Более безопасный способ разбить строку — использовать добавление строк:

document.getElementById("demo").innerHTML = "You Know Nothing" + 
"Jon Snow";

Вы не можете разбить строку кода с помощью обратного слэша:

document.getElementById("demo").innerHTML = \ 
"You Know Nothing, Jon Snow";

Строки могут быть объектами

Обычно строки JavaScript являются примитивными значениями, созданными из литералов:

var firstVar = "Cersei";

Но строки также могут быть определены как объекты с ключевым словом new:

var firstVar = "Cersei";
var secondVar = new String("Cersei");

// typeof firstVar вернет string
// typeof secondVar вернет object

Не создавайте строки как объекты. Это замедляет скорость выполнения.
Ключевое слово new усложняет код и может привести к неожиданным результатам:

При использовании оператора == равные строки — равны:

var firstVar = "Cersei";             
var secondVar = new String("Cersei");

// (firstVar == secondVar) вернет true потому что firstVar и secondVar имеют равные значения

При использовании оператора === равные строки не равны, потому что оператор “===” ожидает равенства как по типу, так и по значению.

var firstVar = "Cersei";             
var secondVar = new String("Cersei");

// (firstVar === secondVar) вернет false, потому что firstVar и secondVar имеют разные типы (строка и объект)

Или еще хуже. Объекты нельзя сравнивать:

var firstVar = "Cersei";             
var secondVar = new String("Cersei");

// (firstVar == secondVar) вернет false, потому что firstVar и secondVar разные объекты
var firstVar = "Cersei";             
var secondVar = new String("Cersei");

// (firstVar === secondVar) вернет false, потому что firstVar и secondVar разные объекты

Обратите внимание на разницу между
(firstVar == secondVar) и (firstVar === secondVar).
Сравнение двух объектов JavaScript всегда будет возвращать false.

Свойства и методы строк

Примитивные значения, такие как “Jon Snow”, не могут иметь свойств или методов (потому что они не являются объектами).
Но с JavaScript, методы и свойства доступны для примитивных значений, поскольку JavaScript обрабатывает примитивные значения как объекты при выполнении методов и свойств.

Свойства строк

Свойство Описание
constructor Возвращает функцию конструктор строки
length Возвращает длину строки
prototype Позволяет добавлять свойства и методы к объекту

Методы строк

Метод Описание
charAt() Возвращает символ в указанном индексе (позиции)
charCodeAt() Возвращает Unicode символа по указанному индексу
concat() Объединяет две или более строк и возвращает новую, объединенную строку
endsWith() Проверяет, заканчивается ли строка указанным символом/строкой
fromCharCode() Преобразует значения Unicode в символы
includes() Проверяет, содержит ли строка указанные символы/строку
indexOf() Возвращает позицию первого найденного вхождения указанного значения в строку
lastIndexOf() Возвращает позицию последнего найденного вхождения указанного значения в строку
localeCompare() Сравнивает две строки в текущей локали
match() Ищет строку для соответствия регулярному выражению и возвращает совпадения
repeat() Возвращает новую строку с указанным количеством копий существующей строки
replace() Ищет строку для указанного значения, или регулярного выражения, и возвращает новую строку, в которой указанные значения заменены
search() Ищет строку для указанного значения, или регулярного выражения, и возвращает позицию совпадения
slice() Извлекает часть строки и возвращает новую строку
split() Разделяет строку в массив подстрок
startsWith() Проверяет, начинается ли строка указанными символами
substr() Извлекает символы из строки, начиная с заданной начальной позиции и на указанное число символов
substring() Извлекает символы из строки, между двумя указанными индексами
toLocaleLowerCase() Преобразует строку в строчные буквы, в соответствии с локалей хоста
toLocaleUpperCase() Преобразует строку в прописные буквы, в соответствии с локалей хоста
toLowerCase() Преобразует строку в строчные буквы
toString() Возвращает значение объекта String
toUpperCase() Преобразует строку в прописные буквы
trim() Удаляет пробелы с обеих концов строки
valueOf() Возвращает примитивное значение объекта String

Все методы строк возвращают новое значение. Они не меняют исходную переменную.

Методы создания HTML-тегов для строк

Данные методы возвращают строку обернутую в соответствующий HTML-тег.

Это не стандартные методы и могут работать не так, как ожидалось, во всех браузерах.

Метод Описание
anchor() Создает якорь
big() Отображает строку с использованием большого шрифта
blink() Отображает мигающую строку (больше не поддерживается браузерами)
bold() Отображает строку жирным шрифтом
fixed() Отображает строку как текст телетайпа
fontcolor() Отображает строку с использованием указанного цвета
fontsize() Отображает строку с указанным размером
italics() Отображает строку курсивом
link() Отображает строку как гиперссылку
small() Отображает строку с использованием небольшого шрифта
strike() Отображает строку с зачеркиванием
sub() Отображает строку в виде подстрочного  текста
sup() Отображает строку в виде надстрочного текста