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

Дата публикации: 2016-11-04

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

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

Как вы помните, любой текст в JavaScript является строкой. Строка обязательно должна быть заключена в кавычки, одинарные или двойные, без разницы:

var hi = 'hello',
    name = "John";

1 2	var hi = 'hello', name = "John";

Сейчас мы записали в переменные всего по одному слову. А что если мы хотим записать большой объем текста? Да без проблем, давайте запишем в переменную какой-нибудь рыбный текст и выведем его в консоль:

var text = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis dignissimos maxime et tempore omnis, ab fugit. Quos nisi, culpa exercitationem!';
console.log(text);

1 2	var text = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis dignissimos maxime et tempore omnis, ab fugit. Quos nisi, culpa exercitationem!'; console.log(text);

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

Как видим, мой текстовый редактор уже подсветил красным цветом возможную проблему. Давайте посмотрим, как на перевод строки в такой интерпретации среагирует браузер:

Синтаксическая ошибка, как и следовало ожидать. Как же быть? Записать в переменную многострочный текст можно несколькими способами. Об одном из них вы даже уже могли догадаться, речь идет о конкатенации строк:

Как видим, редактор уже нормально реагирует на такой вариант записи строки в переменную. Другой вариант — использование обратного слеша (\), который в JavaScript и во многих других языках программирования является экранирующим символом, позволяющим безбоязненно работать со спецсимволами. Что такое спецсимволы мы узнаем далее. Итак, попробуем экранировать невидимый символ перевода строки:

Экранирование также решило нашу проблему. Однако, если мы заглянем в консоль, то и конкатенация строк, и экранирования перевода строки, решив проблему записи в программу, не решило проблему с выводом многострочной строки на экран. Вместо многострочной строки мы увидим в консоли текст в одну строку. Как быть?

И здесь нам поможет специальный символ новой строки — \n. Добавив этот спецсимвол в строку в нужном месте, мы скажем интерпретатору, что в этом месте необходимо завершить текущую строку и сделать переход на новую строку.

var text = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis dignissimos maxime et tempore omnis, ab fugit.\
\nQuos nisi, culpa exercitationem!';
console.log(text);

var text = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis dignissimos maxime et tempore omnis, ab fugit.\

\nQuos nisi, culpa exercitationem!';

console.log(text);

Собственно, если вас не смущает запись текста в коде в одну строку, то мы можем сделать и так:

var text = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis dignissimos maxime et tempore omnis, ab fugit.\nQuos nisi, culpa exercitationem!';
console.log(text);

1 2	var text = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis dignissimos maxime et tempore omnis, ab fugit.\nQuos nisi, culpa exercitationem!'; console.log(text);

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

Экранирующий символ обратный слеш в коде нам действительно не очень нужен в данной ситуации. А нужен он на самом деле, как и отмечалось выше, для экранирования спецсимволов. Например, внутри строки, которую мы заключили в одинарные кавычки, встречается апостроф, т.е. одинарная кавычка:

var text = 'Lorem ipsum d'olor sit amet';

1	var text = 'Lorem ipsum d'olor sit amet';

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

var text = 'Lorem ipsum d\'olor sit amet';
console.log(text);

1 2	var text = 'Lorem ipsum d\'olor sit amet'; console.log(text);

И вот теперь такой код отработает корректно и в выведенной строке мы увидим именно апостроф.

На этом мы завершим текущую статью. Если вы хотите больше узнать о JavaScript, тогда рекомендую обратить свое внимание на уроки по JavaScript и отдельный курс по языку JavaScript. Удачи!

Метки: JavaScript