Javascript вывод элемента строки

Как работать со строками в JavaScript

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

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

Создание и просмотр вывода строк

В JavaScript есть три способа написания строки — они могут быть записаны в одинарных кавычках ( + » + ), двойных кавычках ( » » ) или обратных галочках ( + \ \ + ). Тип используемой кавычки должен совпадать с обеих сторон, однако возможно, что все три стиля могут использоваться в одном и том же сценарии.

Строки, использующие двойные и одинарные кавычки, фактически одинаковы. Поскольку не существует соглашений или официальных предпочтений для строк с одинарными или двойными кавычками, все, что имеет значение, — это согласованность в файлах программы проекта.

'This string uses single quotes.';

"This string uses double quotes.";

Третий и новейший способ создания строки называется * шаблонным литералом *. Шаблонные литералы используют backtick (также известный как серьезный акцент) и работают так же, как обычные строки с несколькими дополнительными бонусами, о которых мы расскажем в этой статье.

`This string uses backticks.`;

Самый простой способ просмотреть вывод строки — вывести ее на консоль с помощью + console.log () + :

console.log("This is a string in the console.");

OutputThis is a string in the console.

Другой простой способ вывести значение — отправить всплывающее окно предупреждения в браузер с помощью + alert () + :

alert("This is a string in an alert.");

Выполнение строки выше приведет к следующему выводу в пользовательском интерфейсе браузера:

изображение: https: //assets.digitalocean.com/articles/eng_javascript/js-strings/js-alert-string-output.png [Вывод строки предупреждения JavaScript]

+ alert () + — менее распространенный метод тестирования и просмотра выходных данных, поскольку закрытие предупреждений может быстро стать утомительным.

Хранение строки в переменной

Переменные в JavaScript — это именованные контейнеры, которые хранят значение, используя ключевые слова + var + , + const + или + let + . Мы можем присвоить значение строки именованной переменной.

const newString = "This is a string assigned to a variable.";

Теперь, когда переменная + newString + содержит нашу строку, мы можем ссылаться на нее и выводить ее на консоль.

Это выведет строковое значение.

OutputThis is a string assigned to a variable.

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

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

• Конкатенация * означает объединение двух или более строк вместе для создания новой строки. Для конкатенации мы используем оператор конкатенации, представленный символом . Символ « также является оператором addition, когда используется с арифметическими операциями.

Давайте создадим простой пример объединения между » Sea » и » horse » .

Конкатенация объединяет строки в конец, объединяя их и выводя новое строковое значение. Если мы хотим, чтобы между словами + Sea + и + horse + был пробел, нам нужно было бы вставить символ пробела в одну из строк:

Мы соединяем строки и переменные, содержащие строковые значения, с конкатенацией.

const poem = "The Wide Ocean"; const author = "Pablo Neruda"; const favePoem = "My favorite poem is " + poem + " by " + author ".";

OutputMy favorite poem is The Wide Ocean by Pablo Neruda.

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

Переменные в строках с литералами шаблона

Особенностью литерального шаблона является возможность включать выражения и переменные в строку. Вместо того чтобы использовать конкатенацию, мы можем использовать синтаксис + $ <> + для вставки переменной.

const poem = "The Wide Ocean"; const author = "Pablo Neruda"; const favePoem = `My favorite poem is $ by $.`;

OutputMy favorite poem is The Wide Ocean by Pablo Neruda.

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

Строковые литералы и строковые значения

Вы можете заметить, что строки, которые мы пишем в исходном коде, заключены в кавычки или обратные кавычки, но фактический вывод на печать не содержит каких-либо кавычек.

Существует различие при обращении к каждому из них. * Строковый литерал * — это строка в том виде, в каком она написана в исходном коде, включая кавычки. * Строковое значение * — это то, что мы видим в выводе, и оно не содержит кавычек.

В приведенном выше примере » Beyond the Sea » является строковым литералом, а + Beyond the Sea является строковым значением.

Кавычки и апострофы в строках

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

Мы можем убедиться в этом, попытавшись использовать апостроф в сокращении + I’m + ниже:

const brokenString = 'I'm a broken string'; console.log(brokenString);

Outputunknown: Unexpected token (1:24)

То же самое относится и к попытке использовать кавычки в строке в двойных кавычках.

Чтобы избежать появления ошибки в этих ситуациях, у нас есть несколько вариантов, которые мы можем использовать:

Мы рассмотрим эти варианты ниже.

Использование альтернативного синтаксиса строки

Простой способ обойти отдельные случаи потенциально сломанных строк — использовать синтаксис строки, противоположный тому, который вы используете в настоящее время.

Например, апострофы в строках, построенные с помощью `+» + `.

"We're safely using an apostrophe in double quotes."

Кавычки в строках, построенных с помощью + ‘+ .

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

Использование символа Escape ( + \ + )

Мы можем использовать escape-символ обратной косой черты ( + \ + ), чтобы JavaScript не интерпретировал кавычку как конец строки.

Синтаксис + \ ‘+ всегда будет одинарной кавычкой, а синтаксис `+ \» + `всегда будет двойной кавычкой, не опасаясь разбить строку.

Используя этот метод, мы можем использовать апострофы в строках, построенных с `+» + `.

'We\'re safely using an apostrophe in single quotes.'

Мы также можем использовать кавычки в строках, построенных с помощью `+» + `.

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

Использование литералов шаблона

Шаблонные литералы определяются с помощью обратных кавычек, и поэтому как кавычки, так и апострофы могут безопасно использоваться без какого-либо дополнительного экранирования или рассмотрения.

`We're safely using apostrophes and "quotes" in a template literal.`;

В дополнение к предотвращению необходимости экранирования символов и разрешению встроенных выражений литералы шаблонов также обеспечивают многострочную поддержку, что мы обсудим в https://www.digitalocean.com/community/tutorials/how-to-work- with-strings-in-javascript # long-strings-and-newlines [следующий раздел].

С помощью чередующегося синтаксиса строки, использования escape-символов и шаблонных литералов существует несколько способов безопасного создания строки.

Длинные строки и переводы строки

Иногда вам может понадобиться вставить символ новой строки или возврат каретки в вашей строке. Экранирующие символы + \ n + или + \ r + могут использоваться для вставки новой строки в вывод кода.

const threeLines = "This is a string\nthat spans across\nthree lines.";

OutputThis is a string that spans across three lines.

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

const threeLines = "This is a string\n" + "that spans across\n" + "three lines.";

Вместо объединения нескольких строк мы можем использовать escape-символ + \ + для перехода на новую строку.

const threeLines = "This is a string\n\ that spans across\n\ three lines.";

Чтобы сделать код более читабельным, мы можем использовать литеральные строки шаблона. Это устраняет необходимость в конкатенации или экранировании длинных строк, содержащих переводы строк. Строка и переводы строки будут сохранены.

const threeLines = `This is a string that spans across three lines.`;

OutputThis is a string that spans across three lines.

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

Заключение

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

Источник