Строки в JavaScript. Методы объекта String

В этой статье разберём как создавать строки в JavaScript. Изучим основные методы для работы с ними, а также рассмотрим, как происходит их сравнение.

Что такое строка?

Строка (String) — это тип данных в JavaScript для представления произвольной последовательности символов.

В JavaScript для строк всегда используется кодировка UTF-16. Она не зависит от того, какая кодировка установлена для HTML-страницы.

Создание строки осуществляется очень просто. Для этого необходимо просто нужные символы поместить между:

• одинарными кавычками ';
• двойными кавычками ";
• обратными кавычками `.

Например:

let name1 = 'Alexander';
let name2 = "Alexander";
let name3 = `Alexander`;

В приведенном выше примере у нас три строки, назначенные разным переменным. Чтобы убедиться, что это все строки, мы можем проверить тип переменной:

console.log(typeof(name1)); // string
console.log(typeof(name2)); // string
console.log(typeof(name3)); // string

Важно знать, что строки в JavaScript неизменяемы. Это значит, что после создания строки, её содержимое изменить нельзя:

let str = 'Go';
str[0] ='g'; // изменим первый символ строки на "g"
console.log(str); // "Go"

Как видите, изменить строку нам не удалось. Чтобы это сделать, нам нужно просто создать новую строку и, например, присвоить её той же самой переменной:

let str = 'Go';
str = 'g' + str[1]; // "go" 
console.log(str); // "go"

Строка может не содержать ни одного символа:

const str1 = '';
const str2 = "";
const str3 = ``;

Такие строки называют пустыми.

Конкатенация строк

В JavaScript конкатенация (объедение) двух или более строк в одну выполняется с помощью оператора +:

const firstName = 'Marcus';
const lastName = 'Wolfe';
const fullName = firstName + ' ' + lastName;
console.log(fullName); // "Marcus Wolfe"

В этом примере между строками, содержащихся в переменных firstName и lastName, мы добавили пробел (' ').

Другой способ сложения строк в JavaScript — это использовать метод concat():

const firstName = 'Marcus';
const lastName = 'Wolfe';
const fullName = firstName.concat(' ', lastName);
console.log(fullName); // "Marcus Wolfe"

В JavaScript вы также можете использовать шаблонные строки для конкатенации строк:

const firstName = 'Marcus';
const lastName = 'Wolfe';
const fullName = `${firstName} ${lastName}`;
console.log(fullName); // "Marcus Wolfe"

Шаблонные строки

Как мы отмечали выше, шаблонные строки — это способ создания строк с помощью обратных кавычек (`). Они появились в языке существенно позже, чем обычные строки и имеют в отличие от них ряд дополнительных возможностей.

1. Шаблонную строку, в отличие от обычной строки, можно располагать на нескольких строчках:

const mySkill = `* HTML
* CSS
* JavaScript`;

Для создания многострочных строк с помощью одинарных и двойных кавычек, нужно использовать символ перевода строки (\n):

const mySkill = '* HTML\n* CSS\n* JavaScript';

Расположить такую строку на нескольких строках можно только с использованием оператора +:

const mySkill = '* HTML\n' + 
'* CSS\n' + 
'* JavaScript';

2. Ещё одно отличие шаблонной строки заключается в том, что она можно включать выражения ${...}:

const name = 'Alexander';
const greeting = `Hi, ${name.toUpperCase()}.`; // "Hi, ALEXANDER."

Экранирование символов

В JavaScript включение символа в строку, который используется для её создания, осуществляется посредством экранирования. В качестве символа экранирования используется обратный слеш \:

const str1 = "He said, \"I love JavaScript!\""; // He said, "I love JavaScript!"
const str2 = 'It\'s a lovely day'; // It's a lovely day
const str3 = `$ echo \`hello\``; // $ echo `hello`

Если этого не сделать, то будет выдана ошибка:

str = "He said, "I learned from itchief!""; // Uncaught SyntaxError: Unexpected identifier 'I'

Кроме экранирования в данном случае вы можете просто использовать другую кавычку:

const str1 = 'He said, "I love JavaScript!"'; // He said, "I love JavaScript!"
const str2 = `It's a lovely day`; // It's a lovely day
const str3 = "$ echo `hello`"; // $ echo `hello`

Кроме этого символ экранирования также используется для вставки спецсимволов в текст. Например:

• \n - перевод строки;
• \ - обратный слеш;
• \t - знак табуляции.

Длина строки

Получение длины строки, т.е. количества символов из которых она состоит, выполняется в JavaScript с помощью свойства length:

const mystr = 'Моя строка текста';
// получаем количество символов
const len = mystr.length;
console.log(len); // 17

Доступ к символам

Извлечь определённый символ строки можно с помощью квадратных скобок. Внутрь квадратных скобок необходимо поместить число (порядковый номер символа). Отсчет символов в строке начинается с 0:

const str = 'Welcome';
// получим первый символ
console.log(str[0]); // "W"
// получим второй символ
console.log(str[1]); // "e"
// получим последний символ
console.log(str[str.length - 1]); // "e"

При передаче индекса несуществующего символа, получим undefined:

const name = 'Zoe';
// получим первый символ
console.log(str[-1]); // undefined
// получим второй символ
console.log(str[3]); // undefined

Кроме этого получить символ строки по его порядковому номеру можно с помощью специальных предназначенных для этого случая методов: charAt и at.

const str = 'Welcome';
// получим первый символ
console.log(str.charAt[2]); // "l"
// получим второй символ
console.log(str.at[3]); // "c"

Метод at появился в языке позже и в отличие от chartAt он более гибкий. Если ему передать на вход отрицательное число, то символ в этом случае будет отсчитываться с конца строки.

const fruit = 'Banana';
// получим последний символ
console.log(fruit.at[-1]); // "a"
// получим предпоследний символ
console.log(fruit.at[-2]); // "n"

Ещё это можно сделать с помощью slice:

const str = 'Welcome';
// получим первый символ
console.log(str.slice(2, 0)); // "l"
// получим второй символ
console.log(str.slice(3, 0)); // "c"

Если вам нужно посимвольно перебрать строку, то можно воспользоваться циклами. Например, for или for..of:

const name = 'Tess';
// длина строки
const len = name.length;
// for
for (let i = 0; i < len; i++) {
  console.log(name[i]); // "T", "e", "s", "s"
}
// for..of
for (let char of name) {
  console.log(char); // "T", "e", "s", "s"
}

Методы строк

Несмотря на то, что строки являются примитивным типом данных, в JavaScript они ведут себя как объекты. Поэтому, при работе с ними, нам доступны различные свойства и методы. Например:

// свойство length для получения длины строки
'Hello'.length; // 5
// метод concat для соединения строк
'Hello'.concat(', Alexander'); // "Hello, Alexander"

Как это работает в JavaScript? Тут всё очень просто. Когда происходит обращение к свойству или методу, строка оборачивается в специальную обёртку new String(). Таким образом создаётся новый экземпляр класса String, который имеет в свою очередь доступ к этим свойствам и методам. То есть по сути движок JavaScript внутри себя делает что-то следующее:

// тип данных 'Hello'
typeof 'Hello'; // "string"
// тип данных new String('Hello')
typeof new String('Hello'); // "object"

(new String('Hello')).length; // 5
(new String('Hello')).concat(', Alexander'); // "Hello, Alexander"

Но использовать в JavaScript new String() непосредственно для создания строк не нужно. Он применяется, как мы уже отметили выше автоматически, как обёртка над строкой, чтобы мы с ней могли работать как с объектом.

Саму функцию String без new можно использовать когда нужно привести некоторое значение к строке:

String(5); // "5"
String(true); // "true"

Другой способ преобразовать значение в строку – это использовать метод toString():

(5).toString(); // "5"
true.toString(); // "true"

В String содержится много методов для выполнения различных операций над строками. Некоторые из них мы уже рассмотрели выше. Это: concat(), at(), slice() и другие. Теперь разберём какие имеются ещё интересные методы в String для работы со строками.

1. Методы для поиска подстроки в строке:

• indexOf(substring [, start]) – возвращает индекс, с которого начинается искомая подстрока в строке;
• lastIndexOf(substring, [, start]) – то же самое, что indexOf, только поиск ведётся с конца строки.

const vegetables = 'Tomato, Potato, Carrot, Tomato';
vegetables.indexOf('Tomato', 5); // 24

const fruits = 'Banana, Peach, Pear, Peach';
fruits.lastIndexOf('Peach', 10); // 8

Параметр start является не обязательным. Он используется, когда нужно указать с какого символа строки необходимо начать поиск. Если его не передать методу, то поиск будет вестись с начала строки.

const vegetables = 'Tomato, Potato, Carrot, Tomato';
vegetables.indexOf('Tomato'); // 0

const fruits = 'Banana, Peach, Pear, Peach';
fruits.lastIndexOf('Peach'); // 21

Если указанная подстрока не найдена, то эти методы в качестве результата возвращают значение -1.

const vegetables = 'Tomato, Potato, Carrot, Tomato';
vegetables.indexOf('Broccoli'); // -1

const fruits = 'Banana, Peach, Pear, Peach';
fruits.lastIndexOf('Peach', 5); // -1

В случае когда нужно проверить содержит ли указанная строка искомую, можно просто воспользоваться методом includes:

const vegetables = 'Tomato, Potato, Carrot, Tomato';
vegetables.includes('Carrot'); // true

// через indexOf тоже это можно сделать, но чуть длиннее
vegetables.indexOf('Carrot') > -1; // true

Этот метод возвращает true, если искомая строка найдена. В противном случае, false.

Для поиска с определённой позиции, её необходимо просто передать во второй аргумент includes:

const file = 'index.html';
file.includes('.html', file.length - 5); // true

Проверить начало и конец строки на соответствие в JavaScript можно очень просто с помощью специальных методов startsWith и endsWith:

const href = 'https://itchief.ru/javascript/';
href.startsWith('https://itchief.ru'); // true

const file = 'index.html';
file.endsWith('.html'); // true

2. Методы для получения подстроки:

• substring(start [, end]) – часть строки между start и end (не включая);
• substr(start [, length]) – часть строки, которая начинается с индекса start длиной length;
• slice(start [, end]) – часть строки между start и end (не включая);

Примеры использования метода substring:

const greeting = 'Hello, Bob! How are you?';
// если второй аргумент не указан, то до конца строки
greeting.substring(7); // "Bob! How are you?"
greeting.substring(7, 10); // "Bob"
// если start больше end, то сработает также, как если бы аргументы поменялись местами
greeting.substring(10, 7); // "Bob"
// если аргументы равны, то получим пустую строку
greeting.substring(7, 7); // ""
// отрицательные аргументы интерпретируются как 0
greeting.substring(5, -2); // "Hello"

Примеры использования метода substr:

const greeting = 'Hello, Bob! How are you?';
// если второй аргумент не указан, то до конца строки
greeting.substr(7); // "Bob! How are you?"
// второй аргумент отвечает за количество возвращаемых символов
greeting.substr(7, 3); // "Bob"
// если первый аргумент отрицательный, то стартовый индекс отсчитывается с конца
greeting.substr(-17, 3); // "Bob"

Примеры использования метода slice:

const greeting = 'Hello, Bob! How are you?';

// если второй аргумент не указан, то до конца строки
greeting.slice(7); // "Bob! How are you?"
// до end (не включая)
greeting.slice(7, 10); // "Bob"
// если start больше или равно end, то получим пустую строку
greeting.slice(10, 7); // ""
// если аргумент отрицательный, то индекс отсчитывается с конца
greeting.slice(-17, -14); // "Bob"

3. Разбиение строки на массив строк в JavaScript выполняется посредством метода split:

const nums = 'One,Two,Three';

// указатель для разделения строки передаётся в первый аргумент
nums.split(','); // ['One', 'Two', 'Three']
nums.split('One,'); // ['', 'Two,Three']
// ограничение на количество элементов, которые будут включены в массив, задаётся во втором аргументе
nums.split(',', 2); // ['One', 'Two']
// если указать в качестве разделителя пустую строку, то строка будет разделена посимвольно
nums.split('', 5); // ['O', 'n', 'e', ',', 'T']

Переворачивание строки с использованием split:

const str = 'Home';
const reverseStr = str.split('').reverse().join();
console.log(reverseStr); // "emoH"

Здесь с помощью split() мы сначала разбиваем строку по разделителю '' на массив строк, каждая из которых это отдельный символ. После этого посредством reverse() инвертируем массив, и в конце с помощью join() обратно преобразуем его в строку.

4. Методы, с помощью которых можно в строке заменить pattern на replacement:

• replace(pattern, replacement);
• replaceAll(pattern, replacement).

В качестве pattern можно использовать строку или регулярное выражение, а для replacement – строку или функцию.

const nums = 'One, Two, Three, Two';
// заменим первую найденную строку "Two" на "Six"
nums.replace('Two', 'Six'); // One, Six, Three, Two
// заменим все найденные строки "Two" на "Six"
nums.replaceAll('Two', 'Six'); // One, Six, Three, Six

В этом примере с помощью метода replace заменили в nums подстроку 'Two' на 'Six'. Для этого мы в качестве первого аргумента передали в replace строку, которую нужно заменить. А во второй аргумент строку, на которую её нужно заменить. С помощью replaceAll мы заменили все вхождения 'Two' на'Six'.

Использование replaceAll для удаления пробелов из строки:

const str = 'A B C';
const strWithoutSpaces = str.replaceAll(' ', '');

console.log(strWithoutSpaces); // ABC

Если нужно убрать другой символ из строки:

'Football'.replaceAll('o', ''); // "Ftball"

Получение кода символа из таблицы UTF-16 в JavaScript осуществляется с помощью метода charCodeAt:

// возвращает число от 0..65535
'@'.charCodeAt(); // 64
// получим код только первого символа строки
'@8'.charCodeAt(); // 64
// получим код символа 8
'@8'.at(1).charCodeAt(); // 56

Статический метод String.fromCharCode() позволяет сформировать строку из указанных числовых кодов символов:

String.fromCharCode(64); // "@"
String.fromCharCode(64, 56); // "@8"

JavaScript изначально был основан на кодировке UTF-8, которая предусматривала 2 байта на один символ. Но позже этого оказалось недостаточно для представления всех символов. Поэтому для кодирования некоторых символов используется 4 байта:

// если использовать charCodeAt, то получим только первые 2 байта, а не 4
'😀'.charCodeAt(); // 55357
// для получения кода символа, который кодируется 4 байтами
'😀'.codePointAt(); // 128512
'👋'.codePointAt(); // 128075

Для получения кодов 4 байтных символов необходимо вместо charCodeAt() использовать codePointAt(). Также и для составления строки из заданных кодов следует вместо String.fromCharCode() использовать String.fromCodePoint():

String.fromCodePoint(128075, 44, 32, 66, 111, 98, 33); // "👋, Bob!"

Метод repeat позволяет создать строку, состояющую из указанного количества повторений другой:

'Bob! ' + 'Yes! '.repeat(3); // "Bob! Yes! Yes! Yes!"

Методы padStart и padEnd позволяют дополнить строку до указанной длины заданным текстом:

// в начало строки
'0312'.padStart(16, '*'); // "************0312"
// в конец строки
'About JavaScript'.padEnd(20, '.'); // About JavaScript....

Методы toLowerCase и toUpperCase предназначены для преобразования соответственно символов строки в строчные и прописные.

let myString = "Welcome to itchief!";
let upperCaseString = myString.toUpperCase();
let lowerCaseString = myString.toLowerCase();

console.log(upperCaseString); // "WELCOME TO ITCHIEF!"
console.log(lowerCaseString); // "welcome to itchief!"

Сравнение строк

Сравнение строк в JavaScript выполняется посимвольно, по их кодам:

'W' > 'w'; // false

Здесь мы получили false, так как 87 < 119. 87 и 119 – это соотвественно коды символов W и w в таблице UTF-16:

'W'.charCodeAt(); // 87
'w'.charCodeAt(); // 119

Как мы уже отметили выше, строки сравниваются посимвольно. То есть сначала сравниваются первые символы. Если их коды не равны, то сравнение завершается. В этом случае та строка будет больше, у которой код символа больше. В противном случае осуществляется переход к сравнению вторых символов и так далее:

'abc' > 'ae'; // false

Здесь сравнение заканчивается на втором символе, так как их коды не равны (код 'e' больше 'b').

Если при сравнении заканчивается одна из строк, то большей считается та, которая длиньше:

'abc' > 'abcd'; // false

Ещё примеры:

'Emma' === 'Emma'; // true
'Anna' !== 'Anna'; // false
'007' == 7; // true, в данном случае строка '007' приводится к числу 7
'15px' == 15; // false, в данном случае строка '15px' приводится к NaN

Кроме этого, в JavaScript имеется метод localeCompare(), который позволяет сравнить строки с учётом языка и определённых правил:

localeCompare(compareString[, locales[, options]])

Например, проверим на равенство строки без учёта регистра в локали 'ru':

const str1 = 'ТЫКВА';
const str2 = 'Тыква';
if (str1.localeCompare(str2, 'ru', {sensitivity: 'accent'}) === 0) {
  console.log('Строки равны');
} else {
  console.log('Строки не равны');
}

С помощью параметра sensitivity указываем, что нужно игнорировать регистр и диактрические знаки при сравнении строк.

В качестве результата localeCompare() возвращает число:

• отрицательное число – первая строка меньше второй;
• 0 – равны;
• положительное число – первая строка больше второй;

В следующем примере отсортируем массив имён в соответствии с текущим языком пользователя:

const names = ['Владимир', 'Евгений', 'Maïa', 'Bob', 'Linda', 'Ирина'];

// сортировка в соответствии с текущей локалью
names.sort((a, b) => a.localeCompare(b));

console.log(names); // ["Владимир", "Евгений", "Ирина", "Bob", "Linda", "Maïa"]