”が"と見た目は似ていて紛らわしい(全角のダブルクオーテーションについて)

突然だが、ブラウザの開発者ツールを開き、下記のコードを入力すると構文エラーとなる。

console.log(”Hello World”);

// => Uncaught SyntaxError: Invalid or unexpected token

原因は単純で上で使われている ” の文字にある。

一見すると、上の Hello World という文字列は " (ダブルクォーテーション) で囲っているように見えるが、実は上のコードで文字列を囲っているのはダブルクオーテーションとおなじに見えるが異なる文字のようだ。

上のコードを動くようにすると(ダブルクオーテーションに置き換える)問題なく動く。

console.log("Hello World");

// => Hello World

” という文字は全角のダブルクオーテーションだった

日本語で ” という文字で検索をかけてみてもダブルクオーテーションという検索結果しか出てこない。

これは一体何なのだと思い、試しに全角で " を入力してみたら、あっさりと上の文字が出てきた。

なるほど、これは全角だったのか。全角のダブルクオーテーションということだが、スペース的には半角分のスペースしか取られていなかったので、全く気が付かなかった。

ちなみに String#codePointAt() で調べてみたところ、

// 半角のダブルクオーテーション
'"'.codePointAt()

// => 34

// 全角のダブルクオーテーション
'”'.codePointAt()

// => 8221

となっており、Code Pointは当然だが全く異なる。

過去に何度かこの全角のダブルクオーテーションにより、一見動いている用に見えるコードが構文エラーで動かず、原因特定に苦労したことが何度かあったので、気をつけたいところ。