JavaScriptエラー
投げて、試してみてください...キャッチ...最後に
このtry
ステートメントは、実行する(試行する)コードブロックを定義します。
このcatch
ステートメントは、エラーを処理するためのコードブロックを定義します。
このfinally
ステートメントは、結果に関係なく実行するコードブロックを定義します。
このthrow
ステートメントは、カスタムエラーを定義します。
エラーが発生します!
JavaScriptコードを実行すると、さまざまなエラーが発生する可能性があります。
エラーは、プログラマーによるコーディングエラー、誤った入力によるエラー、およびその他の予期しないものである可能性があります。
例
この例では、意図的にエラーを生成するために、「alert」のつづりを「adddlert」と間違えました。
<p id="demo"></p>
<script>
try {
adddlert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
JavaScriptはadddlertをエラーとしてキャッチし、キャッチコードを実行して処理します。
JavaScriptを試してキャッチ
このtry
ステートメントを使用すると、実行中にエラーをテストするコードのブロックを定義できます。
このcatch
ステートメントを使用すると、tryブロックでエラーが発生した場合に、実行するコードのブロックを定義できます。
JavaScriptステートメントtry
とcatch
ペアで提供されます。
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
JavaScriptはエラーをスローします
エラーが発生すると、JavaScriptは通常停止し、エラーメッセージを生成します。
これの専門用語は次のとおりです。JavaScriptは例外をスローします(エラーをスローします)。
JavaScriptは、実際には、nameとmessageの2つのプロパティを 持つErrorオブジェクトを作成します。
スローステートメント
このthrow
ステートメントを使用すると、カスタムエラーを作成できます。
技術的には、例外をスローする(エラーをスローする)ことができます。
例外は、JavaScript String
、a Number
、a、Boolean
またはObject
:です。
throw "Too big"; // throw a text
throw 500; // throw a number
およびと
throw
一緒に使用すると、プログラムフローを制御し、カスタムエラーメッセージを生成できます。try
catch
入力検証の例
この例では、入力を調べます。値が間違っていると、例外(err)がスローされます。
例外(err)がcatchステートメントによってキャッチされ、カスタムエラーメッセージが表示されます。
<!DOCTYPE html>
<html>
<body>
<p>Please input a number between
5 and 10:</p>
<input id="demo" type="text">
<button type="button"
onclick="myFunction()">Test Input</button>
<p id="p01"></p>
<script>
function myFunction() {
const message =
document.getElementById("p01");
message.innerHTML = "";
let x =
document.getElementById("demo").value;
try {
if(x == "") throw "empty";
if(isNaN(x)) throw "not a number";
x = Number(x);
if(x < 5) throw
"too low";
if(x > 10) throw "too
high";
}
catch(err) {
message.innerHTML =
"Input is " + err;
}
}
</script>
</body>
</html>
HTML検証
上記のコードは単なる例です。
最近のブラウザは、HTML属性で定義された事前定義された検証ルールを使用して、JavaScriptと組み込みのHTML検証の組み合わせを使用することがよくあります。
<input id="demo" type="number" min="5" max="10" step="1">
フォームの検証について詳しくは、このチュートリアルの後の章をご覧ください。
最後のステートメント
このfinally
ステートメントを使用すると、結果に関係なく、tryとcatchの後にコードを実行できます。
構文
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
finally {
Block of code to be executed regardless of the try / catch result
}
例
function myFunction() {
const message =
document.getElementById("p01");
message.innerHTML = "";
let x =
document.getElementById("demo").value;
try {
if(x == "") throw "is empty";
if(isNaN(x))
throw "is not a number";
x = Number(x);
if(x >
10) throw "is too high";
if(x <
5) throw "is too low";
}
catch(err)
{
message.innerHTML = "Error: " +
err + ".";
}
finally {
document.getElementById("demo").value = "";
}
}
エラーオブジェクト
JavaScriptには、エラーが発生したときにエラー情報を提供するエラーオブジェクトが組み込まれています。
エラーオブジェクトは、名前とメッセージの2つの便利なプロパティを提供します。
エラーオブジェクトのプロパティ
財産 | 説明 |
---|---|
名前 | エラー名を設定または返します |
メッセージ | エラーメッセージ(文字列)を設定または返します |
エラー名の値
エラー名プロパティによって、6つの異なる値が返される可能性があります。
エラー名 | 説明 |
---|---|
EvalError | eval()関数でエラーが発生しました |
RangeError | 「範囲外」の数が発生しました |
ReferenceError | 不正な参照が発生しました |
構文エラー | 構文エラーが発生しました |
TypeError | タイプエラーが発生しました |
URIError | encodeURI()でエラーが発生しました |
6つの異なる値を以下に説明します。
評価エラー
AnEvalError
は、eval()関数のエラーを示します。
新しいバージョンのJavaScriptはEvalErrorをスローしません。代わりにSyntaxErrorを使用してください。
範囲エラー
RangeError
有効な値の範囲外の数値を使用すると、Aがスローされます。
例:数値の有効桁数を500に設定することはできません。
例
let num = 1;
try {
num.toPrecision(500); // A number cannot have 500
significant digits
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
参照エラー
ReferenceError
宣言されていない変数を使用(参照)すると、Aがスローされます。
例
let x = 5;
try {
x = y + 1; // y cannot be used (referenced)
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
構文エラー
SyntaxError
構文エラーのあるコードを評価しようとすると、Aがスローされます。
例
try {
eval("alert('Hello)"); //
Missing ' will produce an error
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
タイプエラー
TypeError
予想されるタイプの範囲外の値を使用すると、Aがスローされます。
例
let num = 1;
try {
num.toUpperCase(); // You cannot convert a number
to upper case
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
URI(Uniform Resource Identifier)エラー
URIError
URI関数で不正な文字を使用すると、Aがスローされます。
例
try {
decodeURI("%%%"); // You cannot URI decode
percent signs
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
非標準エラーオブジェクトのプロパティ
MozillaとMicrosoftは、いくつかの非標準のエラーオブジェクトプロパティを定義しています。
fileName(Mozilla)
lineNumber(Mozilla)
columnNumber(Mozilla)
スタック(Mozilla)
説明(Microsoft)
番号(Microsoft)
これらのプロパティを公開Webサイトで使用しないでください。すべてのブラウザで機能するわけではありません。
完全なエラーリファレンス
Errorオブジェクトの完全なリファレンスについては、完全なJavaScriptエラーリファレンスにアクセスしてください。