Руководство по типу данных String в JavaScript

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

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 это только один символ

Поиск строки внутри другой строки

Вы можете использовать метод 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

Поиск шаблона внутри строки

Вы можете использовать метод 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

Вы узнаете больше о регулярных выражениях в следующих главах.

Извлечение подстроки из строки

Вы можете использовать метод 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]); // Ничего не печатает

Разбиение строки на массив

Метод 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.