Как понять экранирующие символы в document.queryselector?
Смотрю на https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#Escaping_special_characters
и я не могу понять этот раздел:
// "#fooar" (\b is the backspace control character)
console.info('#foo\bar');
// Does not match anything
document.querySelector('#foo\bar');
console.info('#foo\\bar'); // "#foo\bar"
console.info('#foo\\\\bar'); // "#foo\\bar"
document.querySelector('#foo\\\\bar');<div id = "foo\bar"></div>
<div id = "foo:bar"></div>Я новичок в JavaScript и не понимаю, почему 4 косые черты, я нашел еще один похожий вопрос, но я не понял ответов.
Я попытался запустить document.getElementById на «foo \ bar», и он работает нормально с двумя косыми чертами, что имеет смысл для меня, поскольку вам нужна дополнительная обратная косая черта, чтобы избежать первой обратной косой черты, но зачем еще 3 при использовании querySelector?
Я просмотрел похожие сообщения здесь, но ответы для меня не ясны, я ищу простое объяснение того, что здесь происходит, и в чем разница между тем, как работает getelementbyid, который я понимаю (двойная обратная косая черта) и queryselector ( который использует 4).
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Согласно MDN Web Docs, о литеральный Струны:
Besides regular, printable characters, special characters can be encoded using escape notation.
\\->\
Теперь о Document.querySelectorметод:
To match against an ID or selectors that do not follow standard CSS syntax (by using a colon or space inappropriately, for example), you must escape the character with a backslash ("\"). As the backslash is also an escape character in JavaScript, if you are entering a literal string, you must escape it twice (once for the JavaScript string, and another time for querySelector()):
Для Document.getElementById таких вещей не требуется (объяснений не дается, возможно, по устаревшим причинам). Теперь вернемся к нашему вопросу:
Рассмотрим процесс как двухпроходное форматирование, рассмотрим их назад:
- Вам нужно отправить
querySelectorобратную косую черту. Чтобы соответствовать querySelector требование, вам нужно один раз экранировать его:"#foo\\bar". - Если вы хотите использовать представлять как обратную косую черту в Строка Javascript, вам нужно его избежать. Избегаем каждой обратной косой черты; получаем
"#foo\\\\bar"
Спасибо, хм, хорошо, это кажется немного яснее, но при использовании getelementbyid, почему тот же идентификатор выбирается с использованием 2 косых черт вместо 4?
Потому что getElementById может не иметь тех же потребностей, что и querySelector.
вы можете просто объяснить, что вы имеете в виду в 2 строкой javascript? Я не совсем понимаю, почему однократное экранирование не работает как для селектора запроса, так и для строки javascript. Также в своем исходном посте я хочу понять, почему getelementbyid не нужно такое же количество обратных косых черт.
Javascript String = способ, которым Javascript обрабатывает литеральную строку. Для специальных символов требуется «escape-запись» (см. здесь). По поводу querySelector я добавлю некоторые подробности в ответ.
Спасибо, я понял, что это 1 escape-символ, например. «#foo \\ bar» будет достаточно, чтобы скрыть экранирование «\ b» как для javascript, так и для queryselector. if «Поскольку обратная косая черта также является escape-символом в JavaScript, если вы вводите буквальную строку, вы должны экранировать ее дважды (один раз для строки JavaScript, а другой раз для querySelector ())» Тогда разве это не означает только 2 дополнительные обратные косые черты, например "#foo \\\ bar"? Эти две дополнительные обратные косые черты охватывают требования javascript и queryselector в цитате, верно?
Это лучший способ понять, что здесь происходит процесс, когда буквальная строка javascript каким-то образом анализируется, а затем передается в queryselector?
1. «Тогда разве это не означает всего 2 дополнительных обратных косых черты?» Нет, вам нужно экранировать каждая обратная косая черта: сама обратная косая черта, а также обратная косая черта, используемая для ее экранирования в строковом представлении. Таким образом, вы получаете 4 обратных косых черты. 2. «Это лучший способ понять, что здесь происходит процесс [...] для queryselector». Честно говоря, я склонен рассматривать это как вариант реализации querySelector. Они могли сделать это по-другому. Рассматривайте это как требование этой функции. Если вы действительно хотите знать, почему он так устроен, вам следует задать новый вопрос (возможно, не в том месте).
@jobe: "Есть ли лучший способ понять, что здесь происходит процесс, когда буквальная строка javascript каким-то образом анализируется, а затем передается в queryselector?" Да, здесь есть два уровня синтаксического анализа: синтаксический анализ строки JS (интерпретатором JS) и синтаксический анализ селектора (с помощью querySelector). Как показывает практика, обратная косая черта каждый в строке JS должна быть представлена двойной обратной косой чертой. Это означает, что двойная обратная косая черта в селекторе должна быть представлена обратной косой чертой четверной (4x).
Спасибо, @BoltClock, по какой-то причине мне помог двойной подход к анализу, я был поражен тем фактом, что у getelementbyid нет таких же требований, но, как объяснил Амессиль, это просто разные реализации, я думаю.
@jobe: разница в том, что getElementById принимает идентификатор; querySelector принимает селектор CSS, имеющий разные грамматики. В идентификаторе нет символов со специальным значением, которые нужно экранировать, но их довольно много в селекторе CSS.
@BoltClock Правда? Я думал, вы можете использовать те же специальные символы, например * $ \ etc, которые вам нужно будет экранировать?
Я не понимаю, как ответ объясняется в этом посте.