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

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, а индекс последнего символа строки с именем myStrmyStr.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.

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

Массивы — это сложные переменные, которые позволяют нам хранить группы значений под одним именем переменной. Массивы JavaScript могут хранить любое допустимое значение, включая строки, числа, объекты, функции и даже другие массивы, что позволяет создавать более сложные структуры данных, такие как массив объектов или массив массивов. Предположим, вы хотите сохранить название цветов в своем коде JavaScript….

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.