JavaScript エラー - Throw と Try to Catch

try このステートメントは、コードブロック内のエラーをテストすることができます。

catch このステートメントは、エラーを処理することができます。

throw 文はカスタムのエラーを作成することを許可します。

finally 結果に関わらず、tryとcatchの後でコードを実行できるようにします。

エラーは常に発生します！

JavaScriptコードを実行する際には、さまざまなエラーが発生します。

エラーはプログラマーのコーディングエラー、誤った入力によるエラー、または予期せぬ他の問題によって引き起こされる可能性があります。

インスタンス

この例では、以下のように adddlert 意図的にエラーを生成する警告コードを書きます：

<p id="demo"></p>
<script>
try {
    adddlert("ようこそ！");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
</script>

実際に試してみてください

JavaScriptはadddlertをエラーとしてキャプチャし、そのエラーを処理するコードを実行します。

JavaScriptのtryとcatch

try このステートメントは、実行時にエラーを検出するためのコードブロックを定義することができます。

catch このステートメントは、tryコードブロックでエラーが発生した場合に実行されるコードブロックを定義することができます。

JavaScriptの文 try および catch 対

try {
     テスト用のコードブロック
}
 catch(err) {
     エラーを処理するコードブロック
}

JavaScriptがエラーを投げます

エラーが発生すると、JavaScriptは通常停止し、エラーメッセージを生成します。

技術用語はこのように説明されます：JavaScriptは例外（エラー）をスロー（エラーをスロー）します。

JavaScriptは実際には、2つの属性を持つエラーを作成します： Error オブジェクト：name および message。

throw文

throw 文はカスタムのエラーを作成することを許可します。

技術的には、例外（エラー）をスロー（エラーをスロー）。

例外はJavaScriptの文字列、数字、布尔値、またはオブジェクトでできます：

throw "Too big";    // テキストをスロー
throw 500;          // 数字をスロー

例えば、 throw と try および catch これらを一緒に使用することで、プログラムの流れを制御し、カスタムのエラーメッセージを生成できます。

入力検証の例

この例では、入力を確認します。値が不正であれば、例外（err）をスローします。

この例外（err）はcatch文でキャッチされ、カスタムのエラーメッセージを表示します：

<!DOCTYPE html>
<html>
<body>
<p>5から10の間の数字を入力してください：</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">入力をテスト</button>
<p id="message"></p>
<script>
function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "空の";
         if(isNaN(x)) throw "不是数字";
         x = Number(x);
        if(x < 5) throw "小さい";
        if(x > 10) throw "大きすぎる";
    }
    catch(err) {
        message.innerHTML = "入力は " + err;
    }
}
</script>
</body>
</html>

実際に試してみてください

HTML検証

上記のコードはただの例です。

現代のブラウザは、HTML属性で定義された事前設定の検証ルールを使用して、JavaScriptと組み合わせてHTML検証を行うことが一般的です：

<input id="demo" type="number" min="5" max="10" step="1">

表単の検証に関する知識を、このチュートリアルの後の章でさらに学びます。

finally文

finally ステートメントは、tryとcatchの後にコードを実行することを許可します、結果に関わらず：

try {
     // テスト用のコードブロック
}
 catch(err) {
     // エラー処理のコードブロック
} 
finally {
     // どんな結果でも実行されるコードブロック
}

インスタンス

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "是空的";
        if(isNaN(x)) throw "不是数字";
         x = Number(x);
        if(x >  10) throw "太大";
        if(x <  5) throw "太小";
    }
    catch(err) {
        message.innerHTML = "エラー：" + err + ".";
    }
    finally {
        document.getElementById("demo").value = "";
    }
}

実際に試してみてください

Error オブジェクト

JavaScript はエラー発生時にエラーメッセージを提供する組み込みの error オブジェクトを持ちます。

error オブジェクトは 2 つの役立つ属性を提供します：name および message。

Error オブジェクト属性

属性 説明
name エラ名を設定または返します
message エラーメッセージ（文字列 1 つ）を設定または返します

Error Name Values

error の name 属性は 6 つの異なる値を返します：

エラ名 説明
EvalError eval() 函数内で発生したエラー
RangeError 数値範囲外のエラーが発生しました
ReferenceError 無効な参照が発生しました
SyntaxError 文法エラーが発生しました
TypeError タイプエラーが発生しました
URIError encodeURI() 内で発生したエラー

以下にこれらの 6 つの異なる値について詳しく説明します。

Eval エラー

EvalError eval() 函数内のエラーを示すメッセージを投げます。

新しいバージョンの JavaScript は eval() 函数内のエラーに対して何も投げません EvalError。以下を使用してください SyntaxError 代わりに。

範囲エラー

RangeError 合法値の範囲外の数字を使用した場合に発生します。

例えば：数字の有効桁数を 500 に設定することはできません。

インスタンス

var num = 1;
try {
    num.toPrecision(500);   // 数値には 500 つの有効数字を持つことはできません
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

実際に試してみてください

参照エラー

未宣言の変数を使用（参照）した場合には、 ReferenceError 以下のエラーが発生します：

インスタンス

var x;
try {
    x = y + 1;   // y は参照（使用）できません
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

実際に試してみてください

文法エラー

文法エラーのあるコードを計算した場合には、 SyntaxError 投げ出されました：

インスタンス

try {
    eval("alert('Hello')");   // 'が欠けているとエラーが発生します
}
catch(err) {
     document.getElementById("demo").innerHTML = err.name;
}

実際に試してみてください

タイプエラー

もし、使用している値が期待される範囲外である場合には、 TypeError 投げ出されました：

インスタンス

var num = 1;
try {
    num.toUpperCase();   // 数字を大文字に変換することはできません
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

実際に試してみてください

URI エラー

URI 函数で無効な文字を使用した場合、 URIError 投げ出されました：

インスタンス

try {
    decodeURI("%%%");   // これらのパーセントシーケンスは URI エンコーディングできません
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

実際に試してみてください

非標準の Error オブジェクト属性

Mozilla と Microsoft は非標準の error オブジェクト属性を定義しました：

  • fileName (Mozilla)
  • lineNumber (Mozilla)
  • columnNumber (Mozilla)
  • stack (Mozilla)
  • description (Microsoft)
  • number (Microsoft)

これらの属性は公共ウェブサイトで使用しないでください。これらの属性はすべてのブラウザで動作しません。