Зачем нужен эскейпинг строк в javascript

Экранирование, специальные символы

Как мы уже видели, обратная косая черта \ используется для обозначения классов символов, например \d . Это специальный символ в регулярных выражениях (как и в обычных строках).

Есть и другие специальные символы, которые имеют особое значение в регулярном выражении. Они используются для более сложных поисковых конструкций. Вот полный перечень этих символов: [ ] \ ^ $ . | ? * + ( ) .

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

Экранирование символов

Допустим, мы хотим найти буквально точку. Не «любой символ», а именно точку.

Чтобы использовать специальный символ как обычный, добавьте к нему обратную косую черту: \. .

Это называется «экранирование символа».

alert( "Глава 5.1".match(/\d\.\d/) ); // 5.1 (совпадение!) alert( "Глава 511".match(/\d\.\d/) ); // null ("\." - ищет обычную точку)

Круглые скобки также являются специальными символами, поэтому, если нам нужно использовать именно их, нужно указать \( . В приведённом ниже примере ищется строка «g()» :

alert( "function g()".match(/g\(\)/) ); // "g()"

Если мы ищем обратную косую черту \ , это специальный символ как в обычных строках, так и в регулярных выражениях, поэтому мы должны удвоить её.

alert( "1\\2".match(/\\/) ); // '\'

Косая черта

Символ косой черты ‘/’ , так называемый «слэш», не является специальным символом, но в JavaScript он используется для открытия и закрытия регулярного выражения: /. шаблон. / , поэтому мы должны экранировать его.

Вот как выглядит поиск самой косой черты ‘/’ :

alert( "/".match(/\//) ); // '/'

С другой стороны, если мы не используем короткую запись /. / , а создаём регулярное выражение, используя new RegExp , тогда нам не нужно экранировать косую черту:

alert( "/".match(new RegExp("/")) ); // находит /

new RegExp

Если мы создаём регулярное выражение с помощью new RegExp , то нам не нужно учитывать / , но нужно другое экранирование.

Например, такой поиск не работает:

let regexp = new RegExp("\d\.\d"); alert( "Глава 5.1".match(regexp) ); // null

Аналогичный поиск в примере выше с /\d\.\d/ вполне работал, почему же не работает new RegExp(«\d\.\d») ?

Причина в том, что символы обратной косой черты «съедаются» строкой. Как вы помните, обычные строки имеют свои специальные символы, такие как \n , и для экранирования используется обратная косая черта.

Вот как воспринимается строка «\d.\d»:

alert("\d\.\d"); // d.d

Строковые кавычки «съедают» символы обратной косой черты для себя, например:

• \n – становится символом перевода строки,
• \u1234 – становится символом Юникода с указанным номером,
• …А когда нет особого значения: как например для \d или \z , обратная косая черта просто удаляется.

Таким образом, new RegExp получает строку без обратной косой черты. Вот почему поиск не работает!

Чтобы исправить это, нам нужно удвоить обратную косую черту, потому что строковые кавычки превращают \\ в \ :

let regStr = "\\d\\.\\d"; alert(regStr); // \d\.\d (теперь правильно) let regexp = new RegExp(regStr); alert( "Глава 5.1".match(regexp) ); // 5.1

Итого

• Для поиска специальных символов [ ] \ ^ $ . | ? * + ( ) , нам нужно добавить перед ними \ («экранировать их»).
• Нам также нужно экранировать / , если мы используем /. / (но не new RegExp ).
• При передаче строки в new RegExp нужно удваивать обратную косую черту: \\ для экранирования специальных символов, потому что строковые кавычки «съедят» одну черту.

String

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

Синтаксис

Строковые литералы могут быть следующих форм:

'строка текста' "строка текста" "中文 español English हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 தமிழ்"

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

Код	Вывод
\0	нулевой символ (символ NUL)
\’	одинарная кавычка
\»	двойная кавычка
\\	обратный слеш
\n	новая строка
\r	возврат каретки
\v	вертикальная табуляция
\t	табуляция
\b	забой
\f	подача страницы
\uXXXX	Юникод-символ
\xXX	символ в кодировке Latin-1

Либо можно использовать глобальный объект String напрямую:

String(thing) new String(thing)

Параметры

Всё, что может быть преобразовано в строку.

Описание

Строки полезны для хранения данных, которые можно представить в текстовой форме. Некоторые из наиболее частых операций со строками — это проверка их длины, построение строки с помощью операций строковой конкатенации + и +=, проверка на существование или местоположение подстрок с помощью метода indexOf() , либо извлечение подстрок с помощью метода substring() .

Доступ к символам

Существует два способа добраться до конкретного символа в строке. В первом способе используется метод charAt() :

return "кот".charAt(1); // вернёт "о" 

Другим способом (введённым в ECMAScript 5) является рассмотрение строки как массивоподобного объекта, в котором символы имеют соответствующие числовые индексы:

return "кот"[1]; // вернёт "о" 

При доступе к символам посредством нотации с квадратными скобками, попытка удалить символ, или присвоить значение числовому свойству закончится неудачей, поскольку эти свойства являются незаписываемыми и ненастраиваемыми. Смотрите документацию по методу Object.defineProperty() для дополнительной информации.

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

Разработчики на C имеют для сравнения строк функцию strcmp() . В JavaScript вы просто используете операторы меньше и больше:

var a = "a"; var b = "b"; if (a  b)  // true print(a + " меньше чем " + b); > else if (a > b)  print(a + " больше чем " + b); > else  print(a + " и " + b + " равны."); > 

Подобный результат также может быть достигнут путём использования метода localeCompare() , имеющегося у всех экземпляров String .

Разница между строковыми примитивами и объектами String

Обратите внимание, что JavaScript различает объекты String и значения строкового примитива (то же самое верно и для объектов Boolean и Number ).

Строковые литералы (обозначаемые двойными или одинарными кавычками) и строки, возвращённые вызовом String в неконструкторном контексте (то есть, без использования ключевого слова new ) являются строковыми примитивами. JavaScript автоматически преобразует примитивы в объекты String , так что на строковых примитивах возможно использовать методы объекта String . В контекстах, когда на примитивной строке вызывается метод или происходит поиск свойства, JavaScript автоматически оборачивает строковый примитив объектом и вызывает на нём метод или ищет в нём свойство.

var s_prim = "foo"; var s_obj = new String(s_prim); console.log(typeof s_prim); // выведет 'string' console.log(typeof s_obj); // выведет 'object' 

Строковые примитивы и объекты String также дают разные результаты при использовании глобальной функции eval() . Примитивы, передаваемые в eval() , трактуются как исходный код; объекты же String трактуются так же, как и все остальные объекты, а именно: возвращается сам объект. Например:

var s1 = "2 + 2"; // создаёт строковый примитив var s2 = new String("2 + 2"); // создаёт объект String console.log(eval(s1)); // выведет число 4 console.log(eval(s2)); // выведет строку '2 + 2' 

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

Объект String также всегда может быть преобразован в его примитивный аналог при помощи метода valueOf() .

.log(eval(s2.valueOf())); // выведет число 4 

Свойства

Хранит длину строки. Только для чтения.

Методы

Возвращает строку, созданную из указанной последовательности значений Юникода.

Возвращает строку, созданную из указанной последовательности кодовых точек Юникода.

Возвращает строку, созданную из сырой шаблонной строки.

Общие методы объекта String

Методы экземпляров String также доступны в Firefox как часть JavaScript 1.6 (который не является частью стандарта ECMAScript) на объекте String , что позволяет применять эти методы к любому объекту:

var num = 15; console.log(String.replace(num, /5/, "2")); 

Общие методы также доступны для объекта Array .

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

/*globals define*/ // Предполагаем, что все требуемые методы экземпляров String уже присутствуют // (для них так же можно использовать полифилы, если их нет) (function ()  "use strict"; var i, // Мы могли построить массив методов следующим образом, однако метод // getOwnPropertyNames() нельзя реализовать на JavaScript: // Object.getOwnPropertyNames(String).filter(function(methodName) // return typeof String[methodName] === 'function'; // >); methods = [ "quote", "substring", "toLowerCase", "toUpperCase", "charAt", "charCodeAt", "indexOf", "lastIndexOf", "startsWith", "endsWith", "trim", "trimLeft", "trimRight", "toLocaleLowerCase", "toLocaleUpperCase", "localeCompare", "match", "search", "replace", "split", "substr", "concat", "slice", ], methodCount = methods.length, assignStringGeneric = function (methodName)  var method = String.prototype[methodName]; String[methodName] = function (arg1)  return method.apply(arg1, Array.prototype.slice.call(arguments, 1)); >; >; for (i = 0; i  methodCount; i++)  assignStringGeneric(methods[i]); > >)(); 

Примеры

Пример: преобразование в строку

Объект String можно использовать как «безопасную» альтернативу методу toString() , так как хотя он обычно и вызывает соответствующий метод toString() , он также работает и для значений null и undefined . Например:

var outputStrings = []; for (var i = 0, n = inputValues.length; i  n; ++i)  outputStrings.push(String(inputValues[i])); > 

Спецификации

Specification
ECMAScript Language Specification # sec-string-objects

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Строки

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Есть ряд улучшений и новых методов для строк.

Начнём с, пожалуй, самого важного.

Строки-шаблоны

Добавлен новый вид кавычек для строк:

let str = `обратные кавычки`;

Основные отличия от двойных «…» и одинарных ‘…’ кавычек:

В них разрешён перевод строки. Например:

alert(`моя многострочная строка`);

'use strict'; let apples = 2; let oranges = 3; alert(`$ + $ = $`); // 2 + 3 = 5

Функции шаблонизации

Можно использовать свою функцию шаблонизации для строк.

Название этой функции ставится перед первой обратной кавычкой:

let str = func`моя строка`;

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

'use strict'; function f(strings, . values) < alert(JSON.stringify(strings)); // ["Sum of "," + "," =\n ","!"] alert(JSON.stringify(strings.raw)); // ["Sum of "," + "," =\\n ","!"] alert(JSON.stringify(values)); // [3,5,8] >let apples = 3; let oranges = 5; // | s[0] | v[0] |s[1]| v[1] |s[2] | v[2] |s[3] let str = f`Sum of $ + $ =\n $!`;

В примере выше видно, что строка разбивается по очереди на части: «кусок строки» – «параметр» – «кусок строки» – «параметр».

• Участки строки идут в первый аргумент-массив strings .
• У этого массива есть дополнительное свойство strings.raw . В нём находятся строки в точности как в оригинале. Это влияет на спец-символы, например в strings символ \n – это перевод строки, а в strings.raw – это именно два символа \n .
• Дальнейший список аргументов функции шаблонизации – это значения выражений в $ , в данном случае их три.

Зачем strings.raw ?

В отличие от strings , в strings.raw содержатся участки строки в «изначально введённом» виде.

То есть, если в строке находится \n или \u1234 или другое особое сочетание символов, то оно таким и останется.

Это нужно в тех случаях, когда функция шаблонизации хочет произвести обработку полностью самостоятельно (свои спец. символы?). Или же когда обработка спец. символов не нужна – например, строка содержит «обычный текст», набранный непрограммистом без учёта спец. символов.

Как видно, функция имеет доступ ко всему: к выражениям, к участкам текста и даже, через strings.raw – к оригинально введённому тексту без учёта стандартных спец. символов.

Функция шаблонизации может как-то преобразовать строку и вернуть новый результат.

В простейшем случае можно просто «склеить» полученные фрагменты в строку:

'use strict'; // str восстанавливает строку function str(strings, . values) < let str = ""; for(let i=0; i// последний кусок строки str += strings[strings.length-1]; return str; > let apples = 3; let oranges = 5; // Sum of 3 + 5 = 8! alert( str`Sum of $ + $ = $!`);

Функция str в примере выше делает то же самое, что обычные обратные кавычки. Но, конечно, можно пойти намного дальше. Например, генерировать из HTML-строки DOM-узлы (функции шаблонизации не обязательно возвращать именно строку).

Или можно реализовать интернационализацию. В примере ниже функция i18n осуществляет перевод строки.

Она подбирает по строке вида «Hello, $!» шаблон перевода «Привет, !» (где – место для вставки параметра) и возвращает переведённый результат со вставленным именем name :

'use strict'; let messages = < "Hello, !": "Привет, !" >; function i18n(strings, . values) < // По форме строки получим шаблон для поиска в messages // На месте каждого из значений будет его номер: , , … let pattern = ""; for(let i=0; i'; > pattern += strings[strings.length-1]; // Теперь pattern = "Hello, !" let translated = messages[pattern]; // "Привет, !" // Заменит в "Привет, " цифры вида на values[num] return translated.replace(/\/g, (s, num) => values[num]); > // Пример использования let name = "Вася"; // Перевести строку alert( i18n`Hello, $!` ); // Привет, Вася!

Итоговое использование выглядит довольно красиво, не правда ли?

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

Улучшена поддержка Юникода

Внутренняя кодировка строк в JavaScript – это UTF-16, то есть под каждый символ отводится ровно два байта.

Но под всевозможные символы всех языков мира 2 байт не хватает. Поэтому бывает так, что одному символу языка соответствует два Юникодных символа (итого 4 байта). Такое сочетание называют «суррогатной парой».

Самый частый пример суррогатной пары, который можно встретить в литературе – это китайские иероглифы.

Заметим, однако, что не всякий китайский иероглиф – суррогатная пара. Существенная часть «основного» Юникод-диапазона как раз отдана под китайский язык, поэтому некоторые иероглифы – которые в неё «влезли» – представляются одним Юникод-символом, а те, которые не поместились (реже используемые) – двумя.

alert( '我'.length ); // 1 alert( '��'.length ); // 2

В тексте выше для первого иероглифа есть отдельный Юникод-символ, и поэтому длина строки 1 , а для второго используется суррогатная пара. Соответственно, длина – 2 .

Китайскими иероглифами суррогатные пары, естественно, не ограничиваются.

Ими представлены редкие математические символы, а также некоторые символы для эмоций, к примеру:

alert( '��'.length ); // 2, MATHEMATICAL SCRIPT CAPITAL X alert( '��'.length ); // 2, FACE WITH TEARS OF JOY

В современный JavaScript добавлены методы String.fromCodePoint и str.codePointAt – аналоги String.fromCharCode и str.charCodeAt , корректно работающие с суррогатными парами.

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

// как будто в строке два разных символа (на самом деле один) alert( '��'.charCodeAt(0) + ' ' + '��'.charCodeAt(1) ); // 55349 56499

…В то время как codePointAt возвращает его Unicode-код суррогатной пары правильно:

// один символ с "длинным" (более 2 байт) unicode-кодом alert( '��'.codePointAt(0) ); // 119987

Метод String.fromCodePoint(code) корректно создаёт строку из «длинного кода», в отличие от старого String.fromCharCode(code) .

// Правильно alert( String.fromCodePoint(119987) ); // �� // Неверно! alert( String.fromCharCode(119987) ); // 풳

Более старый метод fromCharCode в последней строке дал неверный результат, так как он берёт только первые два байта от числа 119987 и создаёт символ из них, а остальные отбрасывает.

\u

Есть и ещё синтаксическое улучшение для больших Unicode-кодов.

В JavaScript-строках давно можно вставлять символы по Unicode-коду, вот так:

alert( "\u2033" ); // ″, символ двойного штриха

Синтаксис: \uNNNN , где NNNN – четырёхзначный шестнадцатиричный код, причём он должен быть ровно четырёхзначным.

«Лишние» цифры уже не войдут в код, например:

alert( "\u20331" ); // Два символа: символ двойного штриха ″, а затем 1

Чтобы вводить более длинные коды символов, добавили запись \u , где NNNNNNNN – максимально восьмизначный (но можно и меньше цифр) код.

alert( "\u" ); // ��, китайский иероглиф с этим кодом

Unicode-нормализация

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

Например, на основе обычного символа a существуют символы: àáâäãåā . Самые часто встречающиеся подобные сочетания имеют отдельный Юникодный код. Но отнюдь не все.

Для генерации произвольных сочетаний используются несколько Юникодных символов: основа и один или несколько значков.

Например, если после символа S идёт символ «точка сверху» (код \u0307 ), то показано это будет как «S с точкой сверху» Ṡ .

Если нужен ещё значок над той же буквой (или под ней) – без проблем. Просто добавляем соответствующий символ.

К примеру, если добавить символ «точка снизу» (код \u0323 ), то будет «S с двумя точками сверху и снизу» Ṩ .

Пример этого символа в JavaScript-строке:

alert("S\u0307\u0323"); // Ṩ

Такая возможность добавить произвольной букве нужные значки, с одной стороны, необходима, а с другой стороны – возникает проблемка: можно представить одинаковый с точки зрения визуального отображения и интерпретации символ – разными сочетаниями Unicode-кодов.

alert("S\u0307\u0323"); // Ṩ alert("S\u0323\u0307"); // Ṩ alert( "S\u0307\u0323" == "S\u0323\u0307" ); // false

В первой строке после основы S идёт сначала значок «верхняя точка», а потом – нижняя, во второй – наоборот. По кодам строки не равны друг другу. Но символ задают один и тот же.

С целью разрешить эту ситуацию, существует Юникодная нормализация, при которой строки приводятся к единому, «нормальному», виду.

В современном JavaScript это делает метод str.normalize().

alert( "S\u0307\u0323".normalize() == "S\u0323\u0307".normalize() ); // true

Забавно, что в данной конкретной ситуации normalize() приведёт последовательность из трёх символов к одному: \u1e68 (S с двумя точками).

alert( "S\u0307\u0323".normalize().length ); // 1, нормализовало в один символ alert( "S\u0307\u0323".normalize() == "\u1e68" ); // true

Это, конечно, не всегда так, просто в данном случае оказалось, что именно такой символ в Юникоде уже есть. Если добавить значков, то нормализация уже даст несколько символов.

Для большинства практических задач информации, данной выше, должно быть вполне достаточно, но если хочется более подробно ознакомиться с вариантами и правилами нормализации – они описаны в приложении к стандарту Юникод Unicode Normalization Forms.

Полезные методы

Добавлен ряд полезных методов общего назначения:

• str.includes(s) – проверяет, включает ли одна строка в себя другую, возвращает true/false .
• str.endsWith(s) – возвращает true , если строка str заканчивается подстрокой s .
• str.startsWith(s) – возвращает true , если строка str начинается со строки s .
• str.repeat(times) – повторяет строку str times раз.

Конечно, всё это можно было сделать при помощи других встроенных методов, но новые методы более удобны.

Итого

• Строки-шаблоны – для удобного задания строк (многострочных, с переменными), плюс возможность использовать функцию шаблонизации для самостоятельного форматирования.
• Юникод – улучшена работа с суррогатными парами.
• Полезные методы для проверок вхождения одной строки в другую.

escape()

Устарело: Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

Устаревший метод escape() возвращает новую строку, в которой определённые символы заменены шестнадцатеричной управляющей последовательностью. Используйте методы encodeURI или encodeURIComponent вместо него.

Синтаксис

escape(str)

Параметры

Строка для кодирования.

Описание

Функция escape() является свойством глобального объекта, т.е. относится к глобальным функциям. Эта функция кодирует специальные символы, за исключением: @*_+-./

The hexadecimal form for characters, whose code unit value is 0xFF or less, is a two-digit escape sequence: %xx. For characters with a greater code unit, the four-digit format %uxxxx is used.

Примеры

escape("abc123"); // "abc123" escape("текст"); // "%u0442%u0435%u043A%u0441%u0442" escape("ć"); // "%u0107" /* специальные символы */ escape("@*_+-./"); // "@*_+-./" 

Спецификации

Specification
ECMAScript Language Specification # sec-escape-string

Browser compatibility

BCD tables only load in the browser

See also

• encodeURI
• encodeURIComponent

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.