Как сделать перенос строки в js
Обновлено: 05.07.2024
Строкой считается любая последовательность символов в пределах двойных или одинарных кавычек.
Для создания строки с кавычками, нужно их экранировать (обособить) с помощью символа обратный слэш \ или использовать два разных вида кавычек.
Помимо двойных и одинарных кавычек, экранизации подлежат и другие символы (escape последовательности), управляющие форматированием текста.
| Символ | Обозначение |
|---|---|
| \' | одинарная кавычка |
| \'' | двойная кавычка |
| \\ | обратный слэш (не путать с // - знаком начала комментария) |
| \n | новая строка (работает как кнопка Enter) |
| \r | возврат каретки в начало строки (работает как кнопка Home) |
| \t | табуляция (работает как кнопка Tab) |
| \b | удаление символа (работает как кнопка Backspace) |
| \f | печать с новой страницы (устаревшее) |
| \v | вертикальная табуляция (устаревшее) |
| \a | звуковой сигнал (устаревшее) |
| \xXX | символ из Latin-1, где XX шестнадцатеричные цифры (например: \xAF - символ '-') |
| \XXX | символ из Latin-1, где XXX восьмеричные цифры от 1 до 377 (например: \300 - символ 'À') |
| \ucXXXX | символ из Unicode, где XXXX шестнадцатеричные цифры (например: \uc454 - символ '쑔') |
В случае если строка достаточно длинная, то для более легкого чтения ее можно разбить на подстроки с помощью символа обратного слэша \ , не нарушая при этом самой структуры строки.
Это руководство предназначено для того, чтобы охватить всё, что вам нужно знать о работе со строками в JavaScript.
Создание строк
По сути, в JavaScript есть две категории строк: строковые примитивы и объекты String.
Примитивы
Строковые примитивы создаются следующими способами:
Почти во всех случаях вы должны использовать один из этих методов для создания новой строки.
Объекты
Вы можете создать объект String, используя ключевое слово new .
Единственное реальное преимущество объекта перед строковым примитивом состоит в том, что вы можете назначить ему дополнительные свойства:
Однако очень мало случаев, когда это полезно. Практически во всех случаях следует создавать строковый примитив.
Все знакомые вам методы строк являются частью объекта String, а не примитива.
Когда вы вызываете метод для строкового примитива, JavaScript оборачивает примитив в String-объект и вызывает метод этого объекта.
Шаблонные строки
Базовые шаблонные строки
Шаблонные строки позволяют объединять переменные и текст в новую строку с использованием более удобочитаемого синтаксиса.
25 декабря 2021 – 25 февраля 2022, Онлайн, Беcплатно
Вместо двойных или одинарных кавычек заключите строку в обратные кавычки и вставьте переменные, используя синтаксис $
Вы также можете включать выражения в шаблонные строки:
Сейчас браузеры очень хорошо поддерживают работу с шаблонными строками в JavaScript.
Вы также можете вкладывать шаблоны друг в друга, как показано в этом примере из MDN:
Теговые шаблоны
Теговые шаблоны позволяют создать функцию, которая парсит шаблонную строку.
Это может быть действительно мощным инструментом и наиболее наглядно демонстрируется на примере:
Представьте, что у нас есть функция censor() , которая удаляет любые оскорбительные слова в строке, введенной пользователем.
Когда мы хотим подвергнуть строку цензуре, мы можем вручную вызвать censor() для каждого введенного пользователем значения:
Или мы могли бы использовать теговые шаблоны.
Это позволяет нам написать функцию, которая принимает строковые значения из шаблонной строки и все выражения, используемые в шаблоне:
Это означает, что теперь мы можем управлять шаблонной строкой и значениями внутри неё.
Теперь у нас есть доступ к шаблонной строке и отдельным аргументам. Мы можем отслеживать каждую переменную, используемую в строке:
Наконец, наша теговая функция должна вернуть обработанную строку.
Для этого мы просто объединяем исходный массив строк и массив (измененных) входных данных в новый массив.
Здесь мы делаем это с помощью .reduce() :
Наша теговая функция теперь готова, и ее можно использовать везде, где нам нужно цензурировать вводимые пользователем данные:
Теговая функция не обязательно должна возвращать строку.
Например, есть библиотеки для React, которые принимают шаблонную строку и возвращают компонент React.
Raw-строки в JavaScript
String.raw — это предопределенная теговая функция.
Она позволяет вам получить доступ к строке без обработки каких-либо значений после обратного слэша.
Например, при использовании строки, содержащей \ n с String.raw , вместо получения новой строки вы получите фактические символы \ и n :
Это может быть полезно (помимо прочего) для написания строк, в которых вам обычно приходится избегать большого количества символов обратного слэша, таких как пути к файлам:
При использовании string.raw символ \ экранирует последнюю обратную кавычку.
Это означает, что вы не можете заканчивать raw-строку символом \ следующим образом:
Объединение строк
Конкатенация строк
Этот подход также можно использовать для разделения создания строки на несколько строк для удобства чтения:
Вы также можете объединять строки с переменными (нестроковые переменные будут преобразованы в строки):
Чтобы создать новую строку, добавив ее в конец существующей, используйте += :
Вы также можете объединить строки и переменные с помощью метода string.concat(), но это не рекомендуется по соображениям производительности.
Вместо этого используйте операторы + или += как показано выше
Повторение строки
Метод repeat() в JavaScript возвращает новую строку, содержащую исходную строку, повторяющуюся несколько раз.
Вы можете использовать string.repeat() в следующих браузерах:
Объединение строк
Вы можете объединить массив строк в одну, используя метод .join() для массива.
По умолчанию элементы разделяются запятой:
Вы также можете указать строку, используемую для разделения элементов:
Передача пустой строки в string.join объединит элементы, между которыми ничего нет:
Когда toString() используется в массиве, он также возвращает список строк, разделенных запятыми.
Разделение строки
Вы можете разделить строку на массив с помощью метода split() .
Типичные варианты использования:
Превращаем предложение в массив слов, разбивая его по пробелам:
… или разделение многострочной строки на отдельные строки:
Вы также можете ограничить количество элементов, которые вы хотите вернуть из split() , передав необязательный второй параметр:
В современных браузерах вместо этого можно использовать spread-оператор:
Сравнение строк
Равенство
Как вы знаете, что сравнивая два строковых примитива, вы можете использовать операторы == или === :
Если вы сравниваете строковый примитив с чем-то, что не является строкой, == и === ведут себя по-разному.
При использовании оператора == не-строка будет преобразована в строку. Это означает, что JavaScript попытается преобразовать его в строку перед сравнением значений.
Для строгого сравнения, когда не-строки не приводятся к строкам, используйте === :
То же самое верно и для операторов неравенства != и !== :
Если вы не знаете, что использовать, отдавайте предпочтение строгому равенству === .
При использовании объектов String два объекта с одинаковым значением не считаются равными строками в JavaScript:
Чувствительность к регистру
Когда требуется сравнение без учета регистра, обычно преобразуют обе строки в верхний или нижний регистры и сравнивают результат.
Однако иногда вам нужно больше контроля над сравнением. Об этом в следующем разделе …
Работа с диакритическими знаками в строках JavaScript
Диакритические знаки — это модификации буквы, например é или ž.
Возможно вы захотите указать, как они обрабатываются при сравнении двух строк.
Например, в некоторых языках принято исключать акценты при написании прописных букв.
Если вам нужно сравнение без учета регистра, простое преобразование двух строк в один и тот же регистр с помощью toUpperCase() или toLowerCase() не будет учитывать добавление / удаление акцентов и может не дать ожидаемого результата.
Поддержка localeCompare() браузерами:
Больше / меньше
Это означает, что они сравниваются по буквам в том порядке, в котором они появляются в словаре:
При сравнении строк с использованием строчные буквы считаются большими, чем прописные.
Это происходит потому, что JavaScript использует значение каждого символа в Unicode, где строчные буквы идут после прописных.
True или false строки
Пустые строки в JavaScript считаются равными false при сравнении с использованием оператора == (но не при использовании === )
Сортировка строк
Простой Array.sort()
Самый простой способ отсортировать массив строк — использовать метод Array.sort() :
Вы можете избежать такого поведения, сначала преобразовав все строки в один и тот же регистр, или используя localeCompare (см. ниже), что обычно более эффективно.
localeCompare
Использование localeCompare в качестве функции сортировки позволяет сравнивать строки без учета регистра:
Многострочные строки
Вы можете добавлять новые строки, используя \n :
В шаблонной строке новые строки учитываются внутри обратных кавычек:
В шаблонных строках вы можете избежать разрывов строки, добавив \ в конце строки.
Отступы в строках
Вы можете добавить пробел в начало или конец строки, пока она не достигнет указанной длины, используя padStart() или padEnd() :
Вместо пробела вы можете дополнить целевую строку другой строкой, передав ее в качестве второго параметра.
Эта строка будет повторяться до тех пор, пока не будет достигнута целевая длина (строка будет обрезана, если она не помещается):
Поддержка padStart() и padEnd() браузерами::
Извлечение части строки
Подстроки
Эти методы принимают индекс первого символа, который вы хотите извлечь из строки.
Они возвращают все от этого символа до конца строки:
Второй (необязательный) аргумент — это символ, на котором вы хотите остановиться.
Этот последний символ не включается в вывод:
Итак, какой из них вы должны использовать?
Они очень похожи, но с небольшими отличиями:
Также существует метод substr(), похожий на slice() и substring().
Это устаревший API. Хотя вряд ли он будет использоваться в ближайшее время, для работы со строками в JavaScript вам следует использовать один из двух вышеупомянутых методов, где это возможно.
Одиночные символы
Метод charAt() возвращает определенный символ из строки (помните, что индексы начинаются с 0):
Вы также можете рассматривать строку как массив и обращаться к ней напрямую следующим образом:
Доступ к строке как к массиву может привести к путанице, когда строка хранится в переменной.
Использование charAt () более явное:
Изменение регистра строки в JavaScript
Вы можете сделать строку с заглавными буквами следующим образом:
Или все в нижнем регистре, например:
Эти методы обычно используются для преобразования двух строк в верхний / нижний регистр, чтобы выполнить их сравнение без учета регистра.
В зависимости от сравниваемых строк вам может потребоваться больший контроль над сравнением. Вместо этого рассмотрите возможность использования localeCompare.
Удаление пробелов
Следующие методы удаляют все пробелы, табуляции, неразрывные пробелы и символы окончания строки (например, \n ) из соответствующей части строки:
Поиск текста в строке
Найти позицию подстроки
Вы можете искать строку внутри другой строки в JavaScript с помощью indexOf() .
Этот метод вернет позицию первого упоминания искомой подстроки в строке или -1 , если подстрока не найдена:
Вы также можете использовать метод регулярных выражений search() , чтобы сделать то же самое:
Чтобы найти последнее вхождение поискового запроса, используйте lastIndexOf() :
Все эти методы вернут -1 , если подстрока не найдена в целевой строке.
Начинается с / заканчивается на
Вы можете использовать методы indexOf() , указанные выше, чтобы проверить, начинается ли строка с поискового запроса или заканчивается им.
Однако ES6 добавил для этого специальные методы:
Поддержка startsWith() и endsWith() браузерами:
Includes
Если вам не важна конкретная позиция подстроки и важно только, находится ли она вообще в целевой строке, вы можете использовать includes() :
Поддержка includes() браузерами:
Регулярные выражения
Чтобы найти первое совпадение регулярного выражения, используйте .search() .
Чтобы вернуть массив, содержащий все совпадения регулярного выражения, используйте match() с модификатором /g (global):
(использование match() без модификатора /g вернет только первое совпадение и некоторые дополнительные свойства, такие как индекс результата в исходной строке и любые именованные группы захвата)
Если вам нужна дополнительная информация о каждом совпадении, включая их индекс в исходной строке, вы можете использовать matchAll .
Этот метод возвращает итератор, поэтому вы можете использовать цикл for … of для результатов. Вы должны использовать регулярное выражение с модификатором /g/ в matchAll() :
Замена символов в строке
Вы можете использовать replace() для замены определенного текста в строке.
Первый аргумент replace() — это текст, который нужно найти и заменить, второй — текст, которым его нужно заменить.
Передача строки в качестве первого аргумента заменяет только первое совпадение:
Если вы хотите заменить все совпадения, вы можете передать регулярное выражение с модификатором ‘greedy’ ( /g ) в качестве первого аргумента:
и n универсальная последовательность символов новой строки в Javascript для всех платформ? Если нет, то как определить символ для текущей среды?
Я не спрашиваю об элементе HTML newline (
). Я спрашиваю о последовательности символов новой строки, используемой в строках JavaScript.
Да, она универсальна.
хотя '\n' - Это универсальный новая строка символы, вы должны иметь в виду, что, в зависимости от вашего ввода, новые символы строки могут предшествовать символам возврата каретки ( '\r' ).
Не используйте \n, просто попробуйте это:
просто введите обратную косую черту и продолжай в том же духе! Работает как шарм.
было бы проще всего просто обрабатывать все случаи нового символа строки, а не проверять, какой случай, а затем применять его. Например, если вам нужно заменить новую строку, выполните следующие действия:
да использовать \n, если вы не генерируете html-код, в котором вы хотите использовать
функция электронной почты ссылка я использую "%0D%0A"
получить разделитель строк для текущего браузера:
Примечание-при использовании ExtendScript JavaScript (язык сценариев Adobe, используемый в таких приложениях, как Photoshop CS3+), используется символ "\r". "\n " будет интерпретироваться как символ шрифта, и многие шрифты, таким образом, будут иметь символ блока вместо этого.
например (чтобы выбрать слой с именем 'Note' и добавить каналы строк после всех периодов):
в ответ Nilay выше (я не могу комментировать, не хватает репутации):
кто-нибудь знает этот тип кода для клавиши tab? я пробовал "%0D % 09 " но не работать. - Нилай 26 '15 сентября в 13:57
Tab-это один символ, так что если вы попробуете просто %09 это должно быть хорошо. Пример для просмотра отдельных кодов символов:
У меня была проблема выражения строку с \n или \r\n.
Волшебный персонаж \r который используется для возврата каретки работал для меня, как строки.
Поэтому в некоторых случаях полезно рассмотреть \r тоже.
вы можете использовать ` кавычки (которые находятся ниже кнопки Esc) с ES6. Так что вы можете написать что-то вроде этого:
Я считаю, что это -- когда вы работаете со строками JS.
Если вы создаете HTML, хотя, вам придется использовать
теги (не \n , так как вы больше не имеете дело с JS)
Является ли \n универсальной последовательностью символов новой строки в Javascript для всех платформ? Если нет, как мне определить характер для текущей среды?
Я не спрашиваю об элементе новой строки HTML (
). Я спрашиваю о последовательности символов новой строки, используемой в строках JavaScript.
Я только что протестировал несколько браузеров, использующих этот глупый кусочек JavaScript:
IE8 и Opera 9 в Windows используют \r\n . Все остальные протестированные мной браузеры (Safari 4 и Firefox 3.5 в Windows и Firefox 3.0 в Linux) используют \n . Все они могут нормально обрабатывать \n при установке значения, хотя IE и Opera снова конвертируют его обратно в \r\n внутри. Есть статья SitePoint с некоторыми подробностями, которая называется Окончание строк в Javascript.
Также обратите внимание, что это не зависит от фактических концов строк в самом файле HTML (и \n , и \r\n дают одинаковые результаты).
При отправке формы все браузеры канонизируют переводы строк в %0D%0A в кодировке URL. Чтобы увидеть это, загрузите, например, data:text/html, и нажмите кнопку отправки. (Некоторые браузеры блокируют загрузку отправленной страницы, но вы можете увидеть значения формы в кодировке URL в консоли.)
Я не думаю, что вам действительно нужно делать что-то определенное. Если вы просто хотите разделить текст на новые строки, вы можете сделать что-то вроде этого:
Получите разделитель строк для текущего браузера:
Вы можете использовать
и document.write/ , document.writeln .
У меня была проблема с выражением новой строки с помощью \ n или \ r \ n .
Волшебным образом символ \ r , который используется для возврата каретки, работал для меня как новая строка.
Так что в некоторых случаях полезно рассмотреть \ r тоже.
Да используйте \ n, если вы не генерируете HTML-код, в котором вы хотите использовать
Да, это универсально.
Хотя '\n' является универсальным символом новой строки , вы должны иметь в виду, что в зависимости от введенного вами символа новой строки могут предшествовать символы возврата каретки ( '\r' ).
Не используйте "\ n". Просто попробуйте это:
Просто введите обратную косую черту и продолжайте движение! Работает как шарм.
Практическое наблюдение . В моем скрипте NodeJS у меня есть следующая функция:
Может быть проще всего обработать все случаи символа новой строки вместо проверки, в каком случае применять его. Например, если вам нужно заменить символ новой строки, выполните следующие действия:
\n отлично подходит для всех случаев, с которыми я сталкивался. Если вы работаете с сетью, используйте \n и не беспокойтесь об этом (если только у вас не было проблем, связанных с переводом строки).
Вы можете использовать `` цитаты (которые находятся ниже кнопки Esc) с ES6. Таким образом, вы можете написать что-то вроде этого:
Я считаю, что это - когда вы работаете со строками JS.
Однако, если вы генерируете HTML, вам придется использовать теги
(не \n , поскольку вы больше не имеете дело с JS)
Читайте также: