JavaScript のあいまいさプラス記号 ' '_javascript スキル

JavaScript では、1 つのプラス記号に演算子として 3 つの機能があります。文字列の連結を表すことができます。例:

コードをコピー コードは次のとおりです:

var str = 'こんにちは' '世界!'

または数値の正の値を表す単項演算子。例:

コードをコピー コードは次のとおりです。 :

var n = 10;
var n2 = n;
または、数値式の合計演算を表します。例:

コードをコピー コードは次のとおりです: var n = 100;

var nn2 = n 1;

3 つの表現のうち、文字列の連結と数値の合計はあいまいになりがちです。 JavaScript におけるこれら 2 つの演算の処理はデータ型に依存するため、演算子からは判断できません。式だけを見てみましょう:

コードをコピーします

コードは次のとおりです: aa = a b; は、その本当の意味が合計なのか文字列の連結なのかを知る方法がありません。これは、JavaScript エンジンがいつ構文解析を実行するかを判断することも不可能です。

プラス記号 " " によって引き起こされる主な問題は、別のルールに関連しています。このルールは、「式に文字列が含まれる場合、文字列の連結が優先される」です。例:

コードをコピー

コードは次のとおりです:var v1 = '123' ; var v2 = 456; //結果の値を文字列 '123456' として表示します。

一部のホストで発生します 問題が発生しました。たとえば、ブラウザでは、DOM モデル内の多くの値は数値のように見えますが、実際には文字列です。したがって、「and」演算を実行しようとすると、「文字列連結」演算になってしまいます。次の例は、この問題を示しています:

コードをコピー

コードは次のとおりです:

ID testPic の IMG 要素には幅 1 の境界線があることがわかります。デフォルトの単位 px (ピクセル、ピクセル ポイント) は省略されています。ただし、次のコードで境界線を広げようとすると、エラーが発生します (一部のブラウザは値を無視し、他のブラウザは例外をポップアップし、一部のブラウザはクラッシュする可能性があります):

コードをコピーします

コードは次のとおりです:

var el = document.getElementById('testPic'); el.style = 10;

実際、DOM モデルでは、borderWidth は統一された文字列値であるため、ここでの値は「1px」になります。 JavaScript 自体はエラーを起こさず、次のような操作を完了し、その値を borderWidth に割り当てます:

コードをコピー

コードは次のとおりです:

el.style.borderWidth = '1px' 10; //値は '1px10'

現時点では、ブラウザのDOMモデルは「1px10」の意味を解釈できないため、エラーが発生します。 borderWidth 値を再度読み取ると、値は 1px のままです。では、上記の操作プロセスを証明するにはどうすればよいでしょうか?次のコードは、JavaScript 操作の結果が 1px10 であることを示していますが、borderWidth に割り当てられると、DOM はこの間違った値を無視するため、borderWidth は実際には変更されません:

コードをコピーします

コードは次のとおりです:

alert( el.style.borderWidth = '1px' 10 );//値は '1px10'
この問題の根本的な原因は、単位を省略するスタイル シートの記述が許可されている一方で、スクリプト エンジンがここでの演算が数値演算であるか文字列連結であるかを判断できないことです。オペレーター。

その後、W3C は XHTML 仕様を推進し、この問題を最初の側面から回避しようとしましたが、開発コミュニティへの影響は依然として限定的でした。そのため、ブラウザ開発者が提供するマニュアルには、開発者が上記のようなコードを書かないよう、各属性のデータ型を可能な限り記載する予定です。この場合、最も正しい書き方は次のとおりです:

コードをコピーします コードは次のとおりです:

var el = document.getElementById('testPic');
// 1. 元の単位を取得します
var value = parseInt(el.style.borderWidth); .style.borderWidth .substr(value.toString().length);
// 2. 結果を計算し、単位を付加します
el.style.borderWidth = value 10unit; /デフォルトの単位 px を使用し、単位値を省略しようとする属性がわかっている場合は、
// 次に、次の方法を使用できます (これはお勧めしません):
// el.style.borderWidth = parseInt(el.style .borderWidth) 10;