Курс: Продающий лендинг для вашего бизнеса Бесплатно
Создайте сайт с нуля за 40 минут и запустите продажи

Работа со строками в JavaScript

3 комментария

Строка в JavaScript – это неизменяемая, упорядоченная последовательность 16-битных значений, каждое из которых представляет собой символ Unicode. Для представления символов Unicode в JavaScript используется кодировка UTF-16. Каждый символ в строке определяется по номеру индекса, как и элементы массивов.

В данной статье мы разберем основные операции со строками, их индексацию и свойства.

Виды строк в JavaScript

В JavaScript есть два вида строк: примитивные и объекты String. Давайте инициализируем оба типа строк и выведем их тип с помощью typeof:

//Инициализация примитивной строки
const primitiveString = ‘Hello world! Im fine’;

//Инициализация string object
const objectString = new String(primitiveString);

console.log(typeof primitiveString); // выведет 'string'
console.log(typeof objectString);  // выведет 'object'

Как правило, на практике используется примитивный тип строк, так как JavaScript может использовать свойства и методы объекта String без преобразования примитивной строки в object-строку.

Нахождение длины строк

С помощью свойства length мы можем получить количество символов в строках. Давайте найдем длину примитивной строки:

//Инициализация примитивной строки
const primitiveString = ‘Hello world! Im fine’;

console.log(primitiveString.length); // выведет число 20

Индексация символов в строке

Каждому символу в строке соответствует порядковый номер (начиная с 0). Это работает и с элементами в массивах. Давайте посмотрим, как индексируются символы в строках:

//Инициализация примитивной строки
const primitiveString = ‘Hello world! Im fine’;

console.log(primitiveString[0]); // выведет H
console.log(primitiveString[19]); // выведет e
console.log(primitiveString[5]); // выведет пробел

Также можно использовать команду charAt(), передавая в качестве параметра индекс символа, который нам нужно получить:

console.log(primitiveString.charAt(0)); // выведет H
console.log(primitiveString.charAt(19)); // выведет e
console.log(primitiveString.charAt(5)); // выведет пробел

Если нужно получить символы между определенными индексами, то используем метод slice:

//Инициализация примитивной строки
const primitiveString = ‘Hello world! Im fine’;
console.log(primitiveString.slice(6, 11)); // выведет world

Если не указывать второй параметр в качестве ограничения промежутка индексов, то мы получим все символы (с первого параметра до конца строки):

console.log(primitiveString.slice(13)); // выведет Im fine

Нахождение индекса символа

Теперь давайте найдем индекс символа или определим его присутствие в строке. Для этого мы будем использовать метод indexOf:

//Инициализация примитивной строки
const primitiveString = ‘Hello world! Im fine’;

console.log(primitiveString.indexOf(‘H’)); // выведет 0
console.log(primitiveString.indexOf(‘o’)); // выведет 4
console.log(primitiveString.indexOf(‘x’)); // выведет -1

indexOf возвращает -1, если символа, передаваемого в параметре, нет в строке. Если в строке есть несколько искомых символов, то метод возвращает индекс первого из них.

Для того чтобы найти индекс последнего искомого символа, можем использовать метод lastIndexOf:

console.log(primitiveString.lastIndexOf(‘o’)); // выведет 7

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

//Инициализация примитивной строки
const primitiveString = ‘Hello world! Im fine’;

console.log(primitiveString.indexOf(‘world’)); // выведет 6
Вывод: методы indexOf и lastIndexOf возвращают нам индекс по строке в параметре, а charAt и slice получают сами строки по их индексу.

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

Для того чтобы разбить строку на элементы массива по определенным символам, используем метод split. Давайте разделим строку пробелами:

//Инициализация примитивной строки
const primitiveString = ‘Hello world! Im fine’;

console.log(primitiveString.split(' ')); // выведет [ 'Hello', 'world!', 'Im', 'fine' ]

С помощью данного метода мы получаем отдельные слова в строках.

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

//Инициализация примитивной строки
const primitiveString = ‘Hello world! Im fine’;

a = primitiveString.split(' ')
console.log(a[0])

Поиск и замена строковых значений

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

//Инициализация примитивной строки
const primitiveString = ‘Hello world! Im fine’;
console.log(primitiveString.replace(‘world’, ‘people’)) //выведет Hello people! Im fine

Изменение регистра строки

Методы toLowerCase и toUpperCase помогут нам изменить регистр строк. Они пригодятся при использовании indexOf и lastIndexOf, так как в строке могут быть символы разных регистров. Рассмотрим работу методов на примере:

//Инициализация примитивной строки
const primitiveString = ‘Hello world! Im fine’;

console.log(primitiveString.toLowerCase()); // выведет hello world! im fine
console.log(primitiveString.toUpperCase()); // выведет HELLO WORLD! IM FINE

Методы не имеют параметров и не изменяют оригинальную строку.

Отсечение лишних пробелов

Если мы получаем строку с лишними пробелами в начале и конце, то их можно убрать с помощью метода trim:

//Инициализация примитивной строки
const primitiveString = ‘         Hello world! Im fine            ’;

console.log(primitiveString.trim()) //выведет Hello world! Im fine

Вывод

Мы научились пользоваться методами для работы со строками: искать символы по индексу, изменять регистр, разбивать слова и т.д.

Надеюсь, эта статья была полезной для вас. Удачи!

Комментарии

Mihaluc +1
06 фев в 23:03
Полезная статья. Узнал немало нового.
Gu-gu 0
01 апр в 19:52
В целом, классный материал, но тема регулярных выражений не раскрыта. Хотелось бы сценарии использования RegEX здесь тоже видеть. Все-таки один из важнейших механизмов взаимодействия со строками. Причем не только в javascript, но и в программировании в целом!
tor_ 0
19 апр в 14:14
А можно искать отдельные символы и слова не по индексам, а по самой строке? Если я не знаю, где именно расположен знак, но знаю, что он собой представляет? Спасибо
С помощью соцсетей
У меня нет аккаунта Зарегистрироваться
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
С помощью соцсетей
У меня уже есть аккаунт Войти
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
Инструкции по восстановлению пароля высланы на Ваш адрес электронной почты.
Пожалуйста, укажите email вашего аккаунта
Ваш баланс 10 ТК
1 ТК = 1 ₽
О том, как заработать и потратить Таймкарму, читайте в этой статье
Чтобы потратить Таймкарму, зарегистрируйтесь на нашем сайте