読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

組み込み関数

組み込み関数とは


《組み込み関数一覧》

関数名 説明
parseInt 文字列型の数字列を数値型(整数)に変換する
parseFloat 文字列型の数字列を数値型(実数)に変換する
isNaN 指定された値がNaNであるかどうか調べる
encodeURIComponent 指定された文字列をURIエンコードする
decodeURIComponent 指定された文字列をURIデコードする
URIエンコード:URLとして使用できない文字を、特殊文字に変換すること
URIデコード:URIエンコードされた文字をもとの状態に復元すること

数値変換に関する関数
  • 文字列型の値を数値型の値に変換する関数
  • 数値の演算結果を調べる関数


parseInt関数

  • 引数として指定された文字列を整数型に変換し、戻り値として返す関数


《parseIntの利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>parseIntの利用</title>
<script>
  var str = '10';
  console.log( str + 10 );
  var num = parseInt( str );
  console.log( num + 10 );
</script>
</head>
<body>
</body>
</html>

《実行結果》


parseFloat関数

  • 引数として指定された文字列が小数点を含む場合、実数型に変換し戻り値として返す関数
  • アルファベットなどの数値に変換できない値が引数として指定された場合に、戻り値として「NaN」を返します
  • NaNは、演算結果が数値にならなかった」ことを表す特殊な値です
  • 結果がNaNになってしまった場合は、演算失敗なのでエラー処理を行う必要があります


《isNaNの利用》

  • 引数として指定された値がNaNであった場合に、trueを返します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JisNaNの利用</title>
<script>
  var str = 'A';
  var num = parseInt(str);
  if( isNaN(num) ) {
    console.log( '変換失敗' );
  }
</script>
</head>
<body>
</body>
</html>

《実行結果》

  • アルファベットをparseInt関数で数値型に変換しようとしているため、変換に失敗して変数numにNaNが代入されます
エンコード・デコードに関する関数


URLエンコード

  • Web上で文字列を送信する場合、全角文字や一部記号はそのままの状態では送信できないため、送信可能な状態に変換します


デコード

  • 変換された文字列を元に戻す

《encodeURIComponentの利用、decodeURIComponentの利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>encodeURIComponentの利用、decodeURIComponentの利用</title>
<script>
  var encode = encodeURIComponent( 'こんにちは' );
  console.log( encode );
  var decode = decodeURIComponent( encode );
  console.log( decode );
</script>
</head>
<body>
</body>
</html>

《実行結果》

  • encodeURIComponent関数とdecodeURIComponent関数は、引数に指定された文字列をエンコードまたはデコードして、変数後の文字列を戻り値として返します


  • JavaScriptにはあらかじめ便利な関数が用意されている。それを組み込み関数と呼ぶ
  • 文字列型の数字を計算処理などに使う場合は、parseIntやparseFloatで数値型に変換する
  • Web上で文字列を送信する場合は、URLエンコードを行う必要がある