javascript перенос строки в коде

Строки

В JavaScript любые текстовые данные являются строками. Не существует отдельного типа «символ», который есть в ряде других языков.

Внутренний формат для строк — всегда UTF-16, вне зависимости от кодировки страницы.

Кавычки

В JavaScript есть разные типы кавычек.

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

Ещё одно преимущество обратных кавычек — они могут занимать более одной строки, вот так:

Выглядит вполне естественно, не правда ли? Что тут такого? Но если попытаться использовать точно так же одинарные или двойные кавычки, то будет ошибка:

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

Спецсимволы

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

В частности, эти две строки эквивалентны, просто записаны по-разному:

Есть и другие, реже используемые спецсимволы. Вот список:

Примеры с Юникодом:

Все спецсимволы начинаются с обратного слеша, \ — так называемого «символа экранирования».

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

Здесь перед входящей в строку кавычкой необходимо добавить обратный слеш — \’ — иначе она бы обозначала окончание строки.

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

Это можно сделать, добавив перед ним… ещё один обратный слеш!

Источник

Строка (объект String)

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

Строкой в JavaScript является ноль или больше символов, заключенных в кавычки.

Можно использовать как одинарные, так и двойные кавычки:

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

Специальные символы

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

Эта строка будет обрезана до «Мы, так называемые, «.

Для решения этой проблемы нужно воспользоваться экранирующим символом.

Экранирующий символ (\) преобразует специальные символы в символы строки:

Так, последовательность \» вставляет в строку символ двойной кавычки:

Кроме этого в JavaScript существует еще шесть экранированных последовательностей:

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

Перенос длинных строк

Для лучшей читаемости программисты обычно очень редко пишут строчки кода длиннее 80 символов.

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

Также, можно разбить строку при помощи символа обратного слеша (\):

Однако это не лучший способ, так как у него нет универсальной поддержки. Некоторые браузеры не допускают использование пробелов после символа \.

Наиболее безопасным способом переноса строк является оператор строкового сложения:

Нельзя использовать символ обратного слеша (\) для переноса на новую строку кода:

Строки могут быть объектами

Обычно, строки JavaScript это примитивные значения, созданные при помощи литералов.

Однако, при помощи ключевого слова new строки также можно определить и как объекты.

Внимание! Не определяйте строки как объекты. Это замедляет скорость выполнения скрипта. Кроме этого, ключевое слово new в данном случае усложняет код и может привести к неожиданным результатам:

При использовании оператора сравнения ==, одинаковые строки равны:

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

Или еще хуже. Объекты не сравниваются:

Обратите внимание на разницу между (x==y) и (x===y).

При сравнении двух объектов JavaScript всегда возвращается ложь (false).

Источник

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

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

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

Создание строк

По сути, в JavaScript есть две категории строк: строковые примитивы и объекты String.

Примитивы

Строковые примитивы создаются следующими способами:

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

При определении строкового литерала можно использовать одинарные кавычки ( ‘ ‘ ) или двойные кавычки ( » « ).

Объекты

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

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

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

Когда вы вызываете метод для строкового примитива, JavaScript оборачивает примитив в String-объект и вызывает метод этого объекта.

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

Базовые шаблонные строки

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

Вы также можете включать выражения в шаблонные строки:

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

Вы также можете вкладывать шаблоны друг в друга, как показано в этом примере из MDN:

Теговые шаблоны

Теговые шаблоны позволяют создать функцию, которая парсит шаблонную строку.

Это может быть действительно мощным инструментом и наиболее наглядно демонстрируется на примере:

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

Или мы могли бы использовать теговые шаблоны.

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

Это означает, что теперь мы можем управлять шаблонной строкой и значениями внутри неё.

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

Это означает, что вы не обязательно будете знать, сколько аргументов ожидать в вашей функции «тегирования».

В этих случаях полезно поместить каждый из оставшихся аргументов в массив (используя синтаксис «rest»), чтобы вы могли их перебирать:

Теперь у нас есть доступ к шаблонной строке и отдельным аргументам. Мы можем отслеживать каждую переменную, используемую в строке:

Наконец, наша теговая функция должна вернуть обработанную строку.

Для этого мы просто объединяем исходный массив строк и массив (измененных) входных данных в новый массив.

Наша теговая функция теперь готова, и ее можно использовать везде, где нам нужно цензурировать вводимые пользователем данные:

Теговая функция не обязательно должна возвращать строку.

Например, есть библиотеки для React, которые принимают шаблонную строку и возвращают компонент React.

Raw-строки в JavaScript

String.raw — это предопределенная теговая функция.

Она позволяет вам получить доступ к строке без обработки каких-либо значений после обратного слэша.

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

При использовании string.raw символ \ экранирует последнюю обратную кавычку.

Это означает, что вы не можете заканчивать raw-строку символом \ следующим образом:

Объединение строк

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

Вы можете объединить (или «конкатенировать») несколько строк, чтобы создать новую, используя символ + :

Этот подход также можно использовать для разделения создания строки на несколько строк для удобства чтения:

Вы также можете объединять строки с переменными (нестроковые переменные будут преобразованы в строки):

Чтобы создать новую строку, добавив ее в конец существующей, используйте += :

Вы также можете объединить строки и переменные с помощью метода string.concat(), но это не рекомендуется по соображениям производительности.

Вместо этого используйте операторы + или += как показано выше

Повторение строки

Метод repeat() в JavaScript возвращает новую строку, содержащую исходную строку, повторяющуюся несколько раз.

Вы можете использовать string.repeat() в следующих браузерах:

Объединение строк

По умолчанию элементы разделяются запятой:

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

Передача пустой строки в string.join объединит элементы, между которыми ничего нет:

Когда toString() используется в массиве, он также возвращает список строк, разделенных запятыми.

Разделение строки

Типичные варианты использования:

Превращаем предложение в массив слов, разбивая его по пробелам:

… или разделение многострочной строки на отдельные строки:

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

В современных браузерах вместо этого можно использовать spread-оператор:

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

Равенство

Как вы знаете, что сравнивая два строковых примитива, вы можете использовать операторы == или === :

Если вы сравниваете строковый примитив с чем-то, что не является строкой, == и === ведут себя по-разному.

При использовании оператора == не-строка будет преобразована в строку. Это означает, что JavaScript попытается преобразовать его в строку перед сравнением значений.

Для строгого сравнения, когда не-строки не приводятся к строкам, используйте === :

При использовании объектов String два объекта с одинаковым значением не считаются равными строками в JavaScript:

Чувствительность к регистру

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

Однако иногда вам нужно больше контроля над сравнением. Об этом в следующем разделе …

Работа с диакритическими знаками в строках JavaScript

Диакритические знаки — это модификации буквы, например é или ž.

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

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

Если вам нужно сравнение без учета регистра, простое преобразование двух строк в один и тот же регистр с помощью toUpperCase() или toLowerCase() не будет учитывать добавление / удаление акцентов и может не дать ожидаемого результата.

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

Метод localeCompare позволяет указать «sensitivity» сравнения.

Здесь мы использовали base «sensitivity» для сравнения строк с использованием их «базовых» символов (что означает, что регистр и акценты игнорируются).

Поддержка localeCompare() браузерами:

Больше / меньше

При сравнении строк с использованием операторов и > JavaScript будет сравнивать каждый символ в «лексикографическом порядке».

Это означает, что они сравниваются по буквам в том порядке, в котором они появляются в словаре:

При сравнении строк с использованием строчные буквы считаются большими, чем прописные.

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

True или false строки

Пустые строки в JavaScript считаются равными false при сравнении с использованием оператора == (но не при использовании === )

Строки со значением являются «истинными», поэтому вы можете делать нечто подобное:

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

Простой Array.sort()

Самый простой способ отсортировать массив строк — использовать метод Array.sort() :

При сортировке массива строк они сравниваются с использованием «кода UTF-16» каждого символа.

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

Это означает, что строки, начинающиеся с заглавной буквы, всегда находятся перед строками, начинающимися со строчных букв:

Вы можете избежать такого поведения, сначала преобразовав все строки в один и тот же регистр, или используя localeCompare (см. ниже), что обычно более эффективно.

localeCompare

Использование localeCompare в качестве функции сортировки позволяет сравнивать строки без учета регистра:

Многострочные строки

Вы можете добавлять новые строки, используя \n :

В шаблонной строке новые строки учитываются внутри обратных кавычек:

В шаблонных строках вы можете избежать разрывов строки, добавив \ в конце строки.

Отступы в строках

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

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

Эта строка будет повторяться до тех пор, пока не будет достигнута целевая длина (строка будет обрезана, если она не помещается):

Поддержка padStart() и padEnd() браузерами::

Извлечение части строки

Подстроки

Эти методы принимают индекс первого символа, который вы хотите извлечь из строки.

Они возвращают все от этого символа до конца строки:

Второй (необязательный) аргумент — это символ, на котором вы хотите остановиться.

Этот последний символ не включается в вывод:

Итак, какой из них вы должны использовать?

Они очень похожи, но с небольшими отличиями:

Также существует метод substr(), похожий на slice() и substring().

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

Одиночные символы

Метод charAt() возвращает определенный символ из строки (помните, что индексы начинаются с 0):

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

Доступ к строке как к массиву может привести к путанице, когда строка хранится в переменной.

Использование charAt () более явное:

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

Вы можете сделать строку с заглавными буквами следующим образом:

Или все в нижнем регистре, например:

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

В зависимости от сравниваемых строк вам может потребоваться больший контроль над сравнением. Вместо этого рассмотрите возможность использования localeCompare.

Удаление пробелов

Следующие методы удаляют все пробелы, табуляции, неразрывные пробелы и символы окончания строки (например, \n ) из соответствующей части строки:

trimStart() и trimEnd() были введены в ES10 и теперь являются «предпочтительными» методами для использования в соответствии с этой спецификацией.

Однако на момент написания они не поддерживаются в браузере Edge.

Для совместимости во всех современных браузерах используйте trimLeft() и trimRight():

Поиск текста в строке

Найти позицию подстроки

Чтобы найти последнее вхождение поискового запроса, используйте lastIndexOf() :

Начинается с / заканчивается на

Однако ES6 добавил для этого специальные методы:

Поддержка startsWith() и endsWith() браузерами:

Includes

Если вам не важна конкретная позиция подстроки и важно только, находится ли она вообще в целевой строке, вы можете использовать includes() :

Поддержка includes() браузерами:

Регулярные выражения

Чтобы вернуть массив, содержащий все совпадения регулярного выражения, используйте match() с модификатором /g (global):

(использование match() без модификатора /g вернет только первое совпадение и некоторые дополнительные свойства, такие как индекс результата в исходной строке и любые именованные группы захвата)

Этот метод возвращает итератор, поэтому вы можете использовать цикл for … of для результатов. Вы должны использовать регулярное выражение с модификатором /g/ в matchAll() :

Замена символов в строке

Вы можете использовать replace() для замены определенного текста в строке.

Первый аргумент replace() — это текст, который нужно найти и заменить, второй — текст, которым его нужно заменить.

Передача строки в качестве первого аргумента заменяет только первое совпадение:

Если вы хотите заменить все совпадения, вы можете передать регулярное выражение с модификатором ‘greedy’ ( /g ) в качестве первого аргумента:

Поддержка replaceAll() браузерами:

Хинт для программистов: если зарегистрируетесь на соревнования Huawei Cup, то бесплатно получите доступ к онлайн-школе для участников. Можно прокачаться по разным навыкам и выиграть призы в самом соревновании.

Перейти к регистрации

Источник

Символ строки новой строки JavaScript?

и n универсальная последовательность символов новой строки в Javascript для всех платформ? Если нет, то как определить характер для текущей среды?

Я не спрашиваю об элементе новой строки HTML (
). Я спрашиваю о последовательности символов новой строки, используемой в строках JavaScript.

16 ответов

Я только что протестировал несколько браузеров, используя этот глупый бит JavaScript:

обратите внимание также, что это не зависит от фактических окончаний строк в самом HTML-файле (оба \n и \r\n дать те же результаты).

при отправке формы все браузеры канонизируют новые строки в %0D%0A в кодировке URL-адреса. Чтобы увидеть это, загрузите, например, data:text/html, и нажимаем кнопку «Отправить». (Некоторые браузеры блокируют загрузку отправленной страницы,но вы можете увидеть значения формы в URL-кодировке в консоли.)

Я не думаю, что вам действительно нужно делать много каких-либо определений. Если вы просто хотите разделить текст на новые строки, вы можете сделать что-то вроде этого:

Да, это универсально.

Не используйте \n, просто попробуйте следующее:

просто введите назад-Слэш и продолжать truckin’! Работает как заклинание.

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

да используйте \n, если вы не генерируете html-код, в котором вы хотите использовать

функция ссылки по электронной почте я использую «%0D%0A»

получить разделитель строк для текущего браузера:

Примечание-при использовании ExtendScript JavaScript (язык сценариев Adobe, используемый в приложениях, таких как Photoshop CS3+), символ для использования «\r». «\n » будет интерпретироваться как символ шрифта, и многие шрифты, таким образом, будут иметь символ блока.

например (чтобы выбрать слой с именем «Примечание» и добавить строку после всех периодов):

в ответ Nilay выше (я не могу комментировать, недостаточно репутации):

Tab-это один символ, поэтому, если вы попробуете просто %09 все должно быть хорошо. Пример для просмотра отдельных кодов символов:

У меня была проблема выражения строку с \n или \r\n.
Магически персонаж \r который используется для возврата каретки работал для меня, как строки.
Поэтому в некоторых случаях полезно рассмотреть \r тоже.

вы можете использовать ` цитаты (которые ниже кнопки Esc) с ES6. Таким образом, вы можете написать что-то вроде этого:

Я считаю, что это-когда вы работаете со строками JS.

вы можете использовать шестнадцатеричные значения ascii, что-то вроде этого(это сработало для меня):

результат будет такой:

на \n просто отлично подходит для всех случаев, с которыми я столкнулся. Я работаю с web, используйте \n и не беспокойтесь об этом (если у вас не было каких-либо проблем, связанных с новой строкой).

Источник

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

Теперь мы обратим внимание на строки — в программировании так называют части текста. В этой статье мы рассмотрим все распространённые вещи, которые вы должны действительно знать о строках при изучении JavaScript, например, создание строк, экранирование кавычек в строках и объединение строк вместе.

Сила слов

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

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

Строки — основы

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

Создание строки

Одиночные кавычки vs. Двойные кавычки

Экранирование кавычек в строках

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

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

Примечание: Когда вы вводите фактическую строку в свой код, заключённую в одинарные или двойные кавычки, она называется строковым литералом.

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

Давайте посмотрим на конкатенацию строк в действии — вот пример из предыдущего курса:

Числа vs. строки

Заключение

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

Источник