属性の\はいつエスケープされますか？

Question

発生している問題

\を含む属性値を取得すると\がエスケープされていました

\はjavascriptでは特殊な文字で\で\になります
つまりgetAttributeで属性値をjavascriptで取得する際どこかで\を\にエスケープしているのだと考察しました

.

そこから仕様をよみましたがエスケープにあたる工程がみつかりませんでした
https://dom.spec.whatwg.org/#dom-element-getattribute

該当のソースコード

<div id="\hoge"></div>

console.log(document.querySelector("div").getAttribute("id")); ->\hoge
console.log("\hoge"); ->hoge
//なぜ結果が違う?
//getAttributeが\をエスケープしている?（仕様からは判断できず･･･）

よろしくお願いします.

Answer 1

document.querySelector("div").getAttribute("id") は「\hoge」という文字列を取得します。これは言うまでもなく、idの値が「\hoge」だからです。同様にdocument.querySelector("div").idでも「\hoge」が得られます。

次に、JavaScriptのコード上の "\hoge" から 「hoge」という文字列が得られる理由ですが、ご認識のとおり、 \ は次に続く文字を特殊な文字にするためのキーワードだからです。
たとえば "r" は特殊じゃないただの「r」ですが、 "\r" は特殊文字 CR (Carrige Return) を表しますね。 r の通常効果はただの「r」、特殊効果が CR という感じです。

では \ 自身はどうでしょうか。この文字は、通常効果が「次の文字を特殊にする」で、特殊効果が「次の文字を特殊にするのをやめて、ただの『\』になる」です。
"\r" を例に見ると、次のようになります

• 1文字目の \ ... 次の文字を特殊にする
• 2文字目の \ ... 特殊効果で、ただの「\」になった (1文字目のおかげで、次のrを特殊な文字にする効果を失った)
• 3文字目の r ... 通常効果で、ただの「r」

となり、結果としてただの「\」とただの「r」が連なっただけの「\r」が得られます。

"\hoge" に話を戻しますが、上の例にならうとこんな感じです。

• \ ... 次の文字を特殊にする
• h ... 特殊効果を持たないので、ただの「h」が得られる
• o ... ただの「o」
• g ... ただの「g」
• e ... ただの「e」

結果として、「hoge」が得られます。

<div id="\hoge"></div> の \hoge がエスケープされない理由ですが、HTMLには「\は次の文字を特殊にする文字である」というようなルールがないからです。

---

コメントを受けて追記 Sep 17, 2019 9:37 pm

「"\hoge"という文字列をJSで取得すると"\hoge"と解釈されるようになる」という理解でよろしいでしょうか?

これは衝撃の事実なのですが、「文字列」と「文字列リテラル」は別物です。私の回答は意図的に、文字列はカギカッコ、文字列リテラルはダブルクォートで囲って示しています。
「\hoge」という文字列を取得する方法はいくらでもあります。下記の例はいずれも「\hoge」という文字列を取得してコンソールに表示するコードです。

<div id="piyo" data-fuga="\hoge"></div>
<script>

// 例1
const ex1 = document.getElementById('piyo').dataset.fuga;
console.log(ex1);

// 例2
const ex2 = [92, 104, 111, 103, 101].map(c => String.fromCharCode(c)).join('');
console.log(ex2);

// 例3
const ex3 = '\hoge';
console.log(ex3);

</script>

例1は、疑問と提示されたのと同様ですね。IDに入れるのは不適とのyoorwmさんのアドバイスを受けて、datasetに変えています。yoorwmさん、ありがとうございます。
例2は、文字コードから文字列を生成する String.fromCharCode() メソッドを使って、結果を連結しています。
例3は、文字列リテラルから文字列を生成しています。

「文字列リテラル」は文字列を生成するための記法であって文字列そのものではありません。例1と例2はそれぞれの結果として文字列を生成しているのであって、文字列リテラル "\hoge" に変換されているわけではありません。

Comments

[yoorwm]

直接は関係無いけど追加で。
https://w3g.jp/xhtml/dic/id
> ID名に使用可能な文字種は半角アルファベット（a-z|A-Z）、半角数字（0-9）、ハイフン（-）、アンダースコア（_）、コロン（:）、ピリオド（.）のみに制限されています。

[drl29]

ご回答ありがとうございます
>...は「\hoge」という文字列を取得します。
>HTMLには「\は次の文字を特殊にする文字である」というようなルールがないからです。
ということは、「"\hoge"という文字列をJSで取得すると"\hoge"と解釈されるようになる」という理解でよろしいでしょうか?
そのまま文字列を取得するなら"\hoge"をJSで取得したとき"hoge"になると思ったのですが･･･

[thyda.eiqau]

「"\hoge"という文字列をJSで取得すると"\hoge"と解釈されるようになる」という理解でよろしいでしょうか?
これは違うと思いますね。"\hoge"と解釈されたから「\hoge」があるのではなく、文字列は「\hoge」なのです。文字列「\hoge」を表す文字列リテラルが"\hoge"です

Answer 2

HTMLの中では\は特殊文字じゃないので、そのまま普通の文字として扱われて、
JavaScriptの文字列リテラルの中では\は特殊文字なので、\hがhになったということでしょう。

Comments

[drl29]

ご回答ありがとうございます
>･･･なったということでしょう。
私もそう考えているですが、文字列リテラルでは"\hoge" -> "hoge"なのに文字列(を返す関数)では"\hoge" -> "\hoge"となることの理由がわかりません

[otn]

> 文字列リテラルでは"\hoge" -> "hoge"

リテラルの"\hoge"はhogeという文字列ですよ。
リテラルの"\n"が\nという文字列じゃなくて改行文字なのと同じことです。

> 文字列(を返す関数)では"\hoge" -> "\hoge"となることの理由がわかりません

\hogeという文字列を出力すると出力の仕方によってはエスケープされ、\hogeになります。
出力の仕方によっては\hogeのままです。