Строки в 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"]
Комментарии: 3
Ого!)
Буду признателен если подскажете что это за редактор который поддерживает markdown , еще интересно есть связка его с tinymce/
Этот редактор является самописанным решением, как только он будет готов, выложу его на GitHub.