83b6 (cache) JavaScriptでは文字列を「ダブルクォーテーション」ではなく「シングルクォーテーション」で囲う | 「引用符(調査結果)」カテゴリー | JavaScript0

JavaScriptでは文字列を「ダブルクォーテーション」ではなく「シングルクォーテーション」で囲う

調査結果 ＞ 引用符

　状態:終了 　閲覧数:1,895 　投稿日:2014-05-21 　更新日:2014-05-21

結論


JavaScriptでは文字列を「ダブルクォーテーション」ではなく「シングルクォーテーション」で囲う

推奨
'文字列'
非推奨
"文字列"

※言語仕様としては何れも正しい
・処理速度も同じ

「シングルクォーテーション」が推奨されている理由

　閲覧数:60　投稿日:2014-05-21　更新日:2014-05-21　


誰が推奨してるの？


「シングルクォーテーション」で文字列を囲うことを誰が推奨してるの？
・Google
・「Google JavaScript Style Guide」の中で、「 " 」 よりも 「 ' 」 を使うことが推奨されている

Google JavaScript Style Guide とは？
・Googleが公開しているJavaScriptのコーディングスタイルガイド(コーディング規約／コーディングルール)
・同社自身もこのスタイルに従って開発を行っているとされる

原文


Strings
▽Prefer ' over "
For consistency single-quotes (') are preferred to double-quotes ("). This is helpful when creating strings that include HTML:
var msg = 'This is some HTML';


日本語訳


文字列
▽" よりも ' を使ってください.
ダブルクオートよりもシングルクオートを使ってください. そのほうが HTML を含む文字列を作る際に便利です.
var msg = 'なんらかの HTML';



一貫性の問題

　閲覧数:43　投稿日:2014-05-21　更新日:2014-05-21　


具体例


innerHTMLプロパティで、指定HTML要素の「内容」を書き換える場合
※logo はHTML要素の一意の ID を表す文字列

シングルクオーテーション利用
・問題なし
<div id="logo"></div>

document.getElementById('logo').innerHTML = '<img src="sitelogo.jpg" alt="サイトロゴ">JavaScript0';


ダブルクオーテーション利用
・エスケープ処理が必要
<div id="logo"></div>

document.getElementById("logo").innerHTML = "<img src=\"sitelogo.jpg\" alt=\"サイトロゴ\">JavaScript0";


ダブルクオーテーション利用
・あるいは、HTML属性値を、シングルクォーテーションへ書き換える必要がある
<div id="logo"></div>

document.getElementById("logo"').innerHTML = "<img src='sitelogo.jpg' alt='サイトロゴ'>JavaScript0";


つまりどゆこと？


・「シングルクォーテーション」が推奨されている理由は、HTML を含む文字列を作る際に便利だから
・「統一性」「一貫性」を保つため、「シングルクォーテーション」使用が推奨されている

HTML属性値を「"(ダブルクォーテーション)」で囲むことが推奨されている理由は？

　閲覧数:80　投稿日:2014-05-21　更新日:2014-05-21　


前提


HTML属性値を「"(ダブルクォーテーション)」で囲むことが推奨されている理由は？
・上記結論は、HTML属性値を「"(ダブルクォーテーション)」で囲むことを前提としている
・もし仮にこの前提が間違っていたなら、結論も当然違ったものとなる

差異はない


HTML属性値
・調査した結果、仕様的には「"(ダブルクォーテーション)」「'(シングルクォーテーション)」、どちらで囲っても良いことが判明

つまり？


「JavaScript文字列」「HTML属性値」
・何れも、「"(ダブルクォーテーション)」「'(シングルクォーテーション)」、どちらで囲っても良い
・「自由過ぎるわ。どっちかに統一してよ、仕様で」と思うのは私だけ？

ダブルクォーテーション、シングルクォーテーションが紛らわしいと感じる理由

　閲覧数:50　投稿日:2014-05-21　更新日:2014-05-21　


言語間差異


ダブルクォーテーション、シングルクォーテーションが紛らわしいと感じる理由
・ダブルクォーテーション、シングルクォーテーションが紛らわしいと感じる理由の一つとして、言語によって異なる挙動を示す、ということが挙げられる

PHP


シングルクォーテーションの取り扱い
・シングルクォーテーションで括れば 変数 は展開されない
・ただの文字列として取り扱うので、処理速度も速くなる

SQL


文字列
・ダブルクォーテーション、シングルクォーテーション、どちらで囲っても良い
・SELECT "ABC" →文字列の"ABC"と解釈される
・SELECT 'ABC' →文字列の'ABC'と解釈される
・SELECT ABC →ABCは、表名や列名と解釈される

数値
・囲まない
・但し、MySQLでは独自仕様として数値を「'」で囲むことが可能(RDBMS標準ではないMySQLだけの独自仕様)




アクセスランキング
× 週間ページランキング : 1-6 → 1-13

順位 ページタイトル抜粋 アクセス数
1 Resource interpreted as Script but transferred with MIME type text/html: | エラー 81
2 JavaScriptが、Chromeでどうしても期待通りに動作しないとき、試した方が良いかもしれないこと | ブラウザ間差異(ブラウザ) 32
3 JavaScriptでは文字列を「ダブルクォーテーション」ではなく「シングルクォーテーション」で囲う | 引用符(調査結果) 26
4 - | アニメーション(動作確認) 12
5 2.モジュール·パターン … JavaScript におけるパターン | デザインパターン(調査結果) 10
5 document.writeすると、引数で指定した内容以外が表示されないことがある | DOM 10
6 期待した動作を確認することが出来なかったJavaScriptデモンストレーション | その他 9
7 「Origin null is not allowed by Access-Control-Allow-Origin.」がどうしても解決しないときの最後の案 | エラー 8
7 プルダウン改善 | プルダウン(フォーム) 8
8 JavaScript0 7
8 Google Chart Toolsの基礎(全12回) | AngularJS(フレームワーク) 7
8 Titanium Mobileの基礎 (全28回) 1 | AngularJS(フレームワーク) 7
9 「Google AJAX Search API」と「Google Web Search API 」の違い | Custom Search API(API) 6
9 RSS表示内容を無理やり最新へ更新する | Google Feed API(API) 6
9 JavaScriptを理解できない理由 | 調査結果 6
10 WYSIWYGエディタ | 調査結果 5
10 ゲームをアプリ化する（Andoroid編) … チュートリアル6 | 2.60(ティラノスクリプト) 5
11 フォーム カテゴリー 4
11 PHPとAjaxを利用して、書いた内容を自動保存するメモアプリ | コンテンツ編集(動作確認) 4
11 カテゴリー一覧(メイン＋サブ) 4
2015/1/14 5:01 更新

× 人気ページランキング : 2013-1-11 → 2014-9-1

順位 ページタイトル抜粋 アクセス数
1 JavaScriptが、Chromeでどうしても期待通りに動作しないとき、試した方が良いかもしれないこと | ブラウザ間差異(全般) 9691
2 「Origin null is not allowed by Access-Control-Allow-Origin.」がどうしても解決しないときの最後の案 | エラー 6668
3 Googleでホストされているライブラリ(jQuery)を利用する場合の注意事項 | jQuery 3148
4 CSV→JSON変換 | JSON 1958
5 「Google Feed API」で、外部RSS表示 | Google Feed API(API) 1950
6 「WYSIWYGエディタ」メモ | WYSIWYGエディタ 1413
7 JavaScriptに特化した「エディタ」「IDE」 | エディタ、IDE(環境構築) 1197
8 event.returnValue is deprecated. Please use the standard event.preventDefault() instead. | エラー 1169
9 プルダウン改善 | プルダウン(フォーム) 1098
10 JavaScript0 1040
11 AJAX通信後のeval | AJAX通信(jQuery) 1007
12 enchant.jsの基礎 (全17回) | enchant.js(ゲーム) 965
13 Titanium Mobileの基礎 (全28回) 1 | .インストール 911
14 Google Chart Toolsの基礎(全12回) | .インストール(学習) 900
15 jQueryベースのWYSIWYGエディタ『Redactor』 | Redactor(WYSIWYGエディタ) 831
16 テーブルを表示デバイスに合わせて最適化する、レスポンシブ対応jQueryプラグイン「FooTable」 | テーブル(サンプル) 759
17 「Google Feed API 」と「Google AJAX Feed API」の違い | Google AJAX Feed API(API) 738
18 2.モジュール·パターン … JavaScript におけるパターン | デザインパターン(Internet Learning) 663
19 Chrome Developer Toolsの基礎 (全12回) | .インストール(学習) 552
20 メッセージ: 'null' は Null またはオブジェクトではありません。　element.dispatchEvent is not a function | エラー 551
2014/9/2 5:02 更新

0