Строка — это последовательность букв, цифр, специальных символов, арифметических значений или их комбинация. Строки можно создавать, заключая строковый литерал (то есть строковые символы) в одинарные кавычки ('
) или двойные кавычки ("
), как показано в следующем примере:
var myString = 'Hello World!'; // Строка в одинарных кавычках
var myString = "Hello World!"; // Строка в двойных кавычках
Вы можете использовать кавычки внутри строки, если они не соответствуют кавычкам, окружающим строку:
var str1 = "Все нормально";
var str2 = 'Он сказал "Прощай"';
var str3 = "Она ответила: 'Успокойся, пожалуйста'";
var str4 = 'Всем привет!"; // Синтаксическая ошибка - кавычки должны совпадать
Однако вы все равно можете использовать одинарные кавычки внутри строк с одинарными кавычками или двойные кавычки внутри строк с двойными кавычками, экранируя кавычки символом обратного слеша (\
), например так:
var str1 = 'it\'s okay';
var str2 = "He said \"Goodbye\"";
var str3 = 'She replied \'Calm down, please\'';
Обратная косая черта (\
) называется escape-символом (escape character), тогда как последовательности \'
и \"
, которые мы использовали в приведенном выше примере, называются escape-последовательностями (escape sequences).
Escape-последовательности JavaScript
Escape-последовательности также полезны в ситуациях, когда вы хотите использовать символы, которые нельзя набрать с помощью клавиатуры. Вот некоторые другие наиболее часто используемые escape-последовательности.
\n
заменяется символом новой строки;\t
заменяется символом табуляции;\r
заменяется символом возврата каретки;\b
заменяется символом возврата;\\
заменяется одним обратным слешем (\
).
Вот пример, чтобы прояснить, как на самом деле работают escape-последовательности:
var str1 = "The quick brown fox \n jumps over the lazy dog.";
document.write("<pre>" + str1 + "</pre>"); // Создает разрыв строки
var str2 = "C:\Users\Downloads";
document.write(str2); // Печатает C:UsersDownloads
var str3 = "C:\\Users\\Downloads";
document.write(str3); // Печатает C:\Users\Downloads
Выполнение операций над строками
JavaScript предоставляет несколько свойств и методов для выполнения операций со строковыми значениями. Технически, только объекты могут иметь свойства и методы. Но в JavaScript примитивные типы данных могут действовать как объекты, когда вы ссылаетесь на них с помощью нотации доступа к свойству (то есть точечной нотации).
JavaScript делает это возможным путем создания временного объекта-оболочки для примитивных типов данных. Этот процесс выполняется автоматически интерпретатором JavaScript в фоновом режиме.
Получение длины строки
Свойство length возвращает длину строки, которая представляет собой количество символов, содержащихся в строке. Сюда также входит количество специальных символов, таких как \t
или \n
.
var str1 = "This is a paragraph of text.";
document.write(str1.length); // Напечатает 28
var str2 = "This is a \n paragraph of text.";
document.write(str2.length); // Напечатает 30, потому что \n это только один символ
Поскольку length
это свойство, а не функция, не используйте после нее скобки. Вместо str.length()
просто напишите str.length
, иначе это приведет к ошибке.
Поиск строки внутри другой строки
Вы можете использовать метод indexOf()
, чтобы найти подстроку в строке. Этот метод возвращает индекс или позицию первого вхождения указанной строки в строке.
var str = "If the facts don't fit the theory, change the facts.";
var pos = str.indexOf("facts");
alert(pos); // Выводит: 7
Аналогично, вы можете использовать метод lastIndexOf()
, чтобы получить индекс или позицию последнего вхождения указанной строки, например:
var str = "If the facts don't fit the theory, change the facts.";
var pos = str.lastIndexOf("facts");
alert(pos); // Выводит: 46
Методы indexOf()
и lastIndexOf()
возвращают -1, если подстрока не найдена. Оба метода также принимают необязательный целочисленный параметр, который указывает позицию в строке, с которой начинается поиск. Вот пример:
var str = "If the facts don't fit the theory, change the facts.";
// Ищем с начала
var pos1 = str.indexOf("facts", 20);
alert(pos1); // Выводит: 46
// Ищем с конца
var pos2 = str.lastIndexOf("facts", 20);
alert(pos2); // Выводит: 7
Символы в строке индексируются слева направо. Индекс первого символа равен 0
, а индекс последнего символа строки с именем myStr
— myStr.length - 1
.
Поиск шаблона внутри строки
Вы можете использовать метод search()
для поиска определенного фрагмента текста или шаблона внутри строки.
Подобно indexOf()
, метод search()
также возвращает индекс первого совпадения и возвращает -1
, если совпадений не найдено, но в отличие от метода indexOf()
этот метод также может принимать регулярное выражение в качестве аргумента для расширенного поиска.
var str = "Color red looks brighter than color blue.";
// Поиск с учетом регистра
var pos1 = str.search("color");
alert(pos1); // Выводит: 30
// Поиск без учета регистра с использованием регулярных выражений
var pos2 = str.search(/color/i);
alert(pos2); // Выводит: 0
Метод search()
не поддерживает глобальный поиск; он игнорирует флаг g
или модификатор (то есть /pattern/g
) своего аргумента регулярного выражения.
Вы узнаете больше о регулярных выражениях в следующих главах.
Извлечение подстроки из строки
Вы можете использовать метод slice()
для извлечения части или подстроки из строки.
Этот метод принимает 2 параметра: начальный индекс (start index) и необязательный конечный индекс (end index), например str.slice(startIndex, endIndex)
.
В следующем примере часть строки вырезается из позиции 4 и вставляется в позицию 15:
var str = "The quick brown fox jumps over the lazy dog.";
var subStr = str.slice(4, 15);
document.write(subStr); // Печатает: quick brown
Вы также можете указать отрицательные значения. Отрицательное значение обрабатывается как strLength + startIndex
, где strLength
— длина строки (т.е. strLength
), например, если startIndex
равен -5
, он обрабатывается как strLength - 5
. Если startIndex
больше или равен длине строки, метод slice()
возвращает пустую строку. Также, если необязательный endIndex
не указан или опущен, метод slice()
извлекается до конца строки.
var str = "The quick brown fox jumps over the lazy dog.";
document.write(str.slice(-28, -19)); // Печатает: fox jumps
document.write(str.slice(31)); // Печатает: the lazy dog.
Вы также можете использовать метод substring()
для извлечения раздела заданной строки на основе начального и конечного индексов, например str.substring(startIndex, endIndex)
. Метод substring()
очень похож на метод slice()
, за исключением нескольких отличий:
- Если какой-либо аргумент меньше
0
или равенNaN
, он рассматривается как0
; - Если какой-либо аргумент больше, чем
str.length
, он обрабатывается так, как если бы он былstr.length
; - Если
startIndex
большеendIndex
, тоsubstring()
поменяет эти два аргумента; например,str.substring(5, 0) == str.substring(0, 5)
.
Следующий пример покажет вам, как на самом деле работает этот метод:
var str = "The quick brown fox jumps over the lazy dog.";
document.write(str.substring(4, 15)); // Печатает: quick brown
document.write(str.substring(9, 0)); // Печатает: The quick
document.write(str.substring(-28, -19)); // Печатаетnothing
document.write(str.substring(31)); // Печатает: the lazy dog.
Извлечение фиксированного количества символов из строки
JavaScript также предоставляет метод substr()
, который похож на slice()
с небольшим отличием, второй параметр указывает количество извлекаемых символов вместо конечного индекса, например str.substr(startIndex, length)
. Если length
равна 0
или отрицательное число, возвращается пустая строка. Следующий пример демонстрирует, как это работает:
var str = "The quick brown fox jumps over the lazy dog.";
document.write(str.substr(4, 15)); // Печатает: quick brown fox
document.write(str.substr(-28, -19)); // Ничего не печатает
document.write(str.substr(-28, 9)); // Печатает: fox jumps
document.write(str.substr(31)); // Печатает: the lazy dog.
Замена содержимого строки
Вы можете использовать метод replace()
для замены части строки другой строкой. Этот метод принимает два параметра: регулярное выражение для сопоставления или заменяемую подстроку и замещающую строку, например str.replace(regexp|substr, newSubstr)
.
Этот метод replace()
возвращает новую строку, она не влияет на исходную строку, которая останется неизменной. Следующий пример покажет вам, как это работает:
var str = "Color red looks brighter than color blue.";
var result = str.replace("color", "paint");
alert(result); // Выводит: Color red looks brighter than paint blue.
По умолчанию метод replace()
заменяет только первое совпадение и учитывает регистр. Чтобы заменить подстроку в строке без учета регистра, вы можете использовать регулярное выражение (regexp) с модификатором i
, как показано в следующем примере:
var str = "Color red looks brighter than color blue.";
var result = str.replace(/color/i, "paint");
alert(result); // Выводит: paint red looks brighter than color blue.
Аналогично, чтобы заменить все вхождения подстроки в строке без учета регистра, вы можете использовать модификатор g
вместе с модификатором i
, например так:
var str = "Color red looks brighter than color blue.";
var result = str.replace(/color/ig, "paint");
alert(result); // Выводит: paint red looks brighter than paint blue.
Преобразование строки в верхний или нижний регистр
Вы можете использовать метод toUpperCase()
для преобразования строки в верхний регистр, например так:
var str = "Hello World!";
var result = str.toUpperCase();
document.write(result); // Печатает: HELLO WORLD!
Точно так же вы можете использовать toLowerCase()
для преобразования строки в нижний регистр, например так:
var str = "Hello World!";
var result = str.toLowerCase();
document.write(result); // Печатает: hello world!
Объединение двух или более строк
Вы можете объединить две или более строк, используя операторы присваивания +
и +=
.
var hello = "Hello";
var world = "World";
var greet = hello + " " + world;
document.write(greet); // Печатает: Hello World
var wish = "Happy";
wish += " New Year";
document.write(wish); // Печатает: Happy New Year
JavaScript также предоставляет метод concat()
для объединения строк, но это не рекомендуется.
Доступ к отдельным символам из строки
Вы можете использовать метод charAt()
для доступа к отдельному символу из строки, например str.charAt(index)
. Указанный index
должен быть целым числом от 0
до str.length - 1
. Если индекс не указан, возвращается первый символ в строке, поскольку по умолчанию 0
.
var str = "Hello World!";
document.write(str.charAt()); // Печатает: H
document.write(str.charAt(6)); // Печатает: W
document.write(str.charAt(30)); // Ничего не печатает
document.write(str.charAt(str.length - 1)); // Печатает: !
Есть еще лучший способ сделать это. Начиная с ECMAScript 5, строки могут обрабатываться как массивы только для чтения, и вы можете получить доступ к отдельным символам из строки, используя квадратные скобки ([]
) вместо метода charAt()
, как показано в следующем примере:
var str = "Hello World!";
document.write(str[0]); // Печатает: H
document.write(str[6]); // Печатает: W
document.write(str[str.length - 1]); // Печатает: !
document.write(str[30]); // Ничего не печатает
Единственное отличие между доступом к символу из строки с использованием charAt()
и квадратной скобки ([]
) состоит в том, что если символ не найден, []
возвращает undefined
, тогда как метод charAt()
возвращает пустую строку.
Разбиение строки на массив
Метод split()
может использоваться для разделения строки на массив строк с использованием синтаксиса str.split(separator, limit)
. Аргумент seperator
указывает строку, в которой должно происходить каждое разбиение, тогда как аргументы limit
указывают максимальную длину массива.
Если аргумент separator
пропущен или не найден в указанной строке, вся строка присваивается первому элементу массива. В следующем примере показано, как это работает:
var fruitsStr = "Apple, Banana, Mango, Orange, Papaya";
var fruitsArr = fruitsStr.split(", ");
document.write(fruitsArr[0]); // Печатает: Apple
document.write(fruitsArr[2]); // Печатает: Mango
document.write(fruitsArr[fruitsArr.length - 1]); // Печатает: Papaya
// Перебираем все элементы массива фруктов
for(var i in fruitsArr) {
document.write("<p>" + fruitsArr[i] + "</p>");
}
Чтобы разбить строку на массив символов, укажите пустую строку (""
) в качестве разделителя.
var str = "INTERSTELLAR";
var strArr = str.split("");
document.write(strArr[0]); // Печатает: I
document.write(strArr[1]); // Печатает: N
document.write(strArr[strArr.length - 1]); // Печатает: R
// Перебираем все элементы массива символов и печатаем их
for(var i in strArr) {
document.write("<br>" + strArr[i]);
}
Подробнее о циклах операторов вы узнаете в Руководстве по циклам в JavaScript.