JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScript関数から文字列を返す方法【returnステートメントの使い方】

JavaScript関数から文字列を返す基本

JavaScriptの関数から文字列を返すには、returnステートメントを使用します。returnは、関数内で処理した結果を呼び出し元に渡すための重要な構文です。

サンプルコード

以下のコードでは、2つの引数（名前と科目）を受け取り、それらを連結した文字列を返す関数concatenate()を定義しています。実際にブラウザで動作を確認してみましょう。

<html>
   <head>
      <script>
         function concatenate(name, subject) {
            var val;
            val = name + subject;
            return val;
         }
         function DisplayFunction() {
            var result;
            result = concatenate('Amit', ' Java');
            document.write(result);
         }
      </script>
   </head>
  
   <body>
      <p>Click the following button to call the function</p>
      <form>
         <input type = "button" onclick = "DisplayFunction()" value = "Result">
      </form>
   </body>
</html>

コードの解説

このコードの処理の流れは以下のとおりです。

  • concatenate() 関数： 引数nameとsubjectを受け取り、+演算子で連結した結果を変数valに格納し、returnで呼び出し元へ返します。
  • DisplayFunction() 関数： concatenate()を呼び出し、戻り値を変数resultに代入した後、document.write()を使って画面に表示します。
  • ボタンのクリックイベント： onclick属性によって、ボタン「Result」をクリックするとDisplayFunction()が実行される仕組みです。

実行結果

ボタンをクリックすると、画面に「Amit Java」という文字列が表示されます。これは、concatenate('Amit', ' Java')の戻り値がreturnによって正しく返され、呼び出し元で利用できていることを示しています。

ポイントまとめ

  • 関数から文字列を返すにはreturnステートメントを使う
  • returnの後に記述した値や式が、その関数の戻り値になる
  • 戻り値は変数に代入したり、別の処理に渡して再利用できる
  • returnが実行された時点で関数の処理は終了する
  1. JavaScript関数からオブジェクトを返す方法をわかりやすく解説

    JavaScriptの関数からオブジェクトを返すには、return文を使用します。オブジェクト内のプロパティやメソッドにアクセスする際は、thisキーワードを活用すると便利です。この記事では、実際のコード例を使いながら、JavaScript関数からオブジェクトを返す基本的な方法を解説します。基本的な考え方JavaScriptでは、オブジェクトの中にメソッド（関数）を定義できます。そのメソッド内でreturn文を使えば、処理結果や値を呼び出し元に返すことができます。また、thisキーワードを参照することで、同じオブジェクト内の他のプロパティにアクセス可能です。サンプルコード以下のコードでは、従業

  2. JavaScriptの配列を文字列に変換する方法【toString()の使い方を解説】

    JavaScriptで配列の要素をひとつの文字列として扱いたい場面はよくあります。そんなときに便利なのがtoString()メソッドです。このメソッドを使うと、配列の各要素がカンマ（,）で区切られたひとつの文字列に変換されます。以下は、ボタンをクリックすると配列の中身が文字列として画面に表示されるシンプルなサンプルコードです。サンプルコード<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-