初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

Javascript 組み込み関数

JavaScriptがすでに備えている関数

関数名説明
parseInt 文字列型の数字列を数値型(整数)に変換する
parseFloat 文字列型の数字列を数値型(実数)に変換する
isNaN 指定された値がNaNであるかどうか調べる
encodeURIComponent 指定された文字列をURIエンコードする
decodeURIComponent 指定された文字列をURIデコードする
数値変換に関する関数

以前の記事でも一度触れていますが改めて記述します。

parseInt関数

parseInt関数は引数として指定された文字列を整数型に変換し、戻り値として返す関数です。 記述はキャメルケースを利用して記述します。
小数点を含む文字列をparseInt関数で整数に変換すると、同時に小数点以下は切り捨てられます。
またアルファベット等の数値に変換できない値が引数として明記された場合に、戻り値としてNot a Numberである【NaN】を返します
【NaN】は、「演算結果が数値にならなかった」ことを表す特殊な値です

<script>
var str1 = '10';
console.log( str1 + 10 );
var str2 = '5.5';
console.log( str2 + 10 );
var num1 = parseInt( str1 );
console.log( num1 + 10 );
var num2 = parseInt( str2 );
console.log( num2 + 10 );
</script>

実行結果
f:id:bellsmarket:20150207231104p:plain

parseFloat関数

parseFloat関数は引数として指定された文字列が小数点を含む場合、実数型に変換し戻り値として返す関数です。記述はparseInt関数と同様にキャメルケースを利用して記述します。
Not a NumberについてもparseInt関数と同様です。

<script>
 var str1 = '5.5';
 console.log( str1 + 10 );
 var num1 = parseFloat( str1 );
 console.log( num1 + 10 );
 var str2 = 'ABC';
 console.log( str2 + 10 );
 var num2 = parseFloat( str2 );
 console.log( num2 + 10 );
</script>

実行結果
f:id:bellsmarket:20150207232353p:plain

isNaN関数

値が 【NaN】 (非数) である場合は true を返します。この関数は、数式が正常に評価されて数値になるかどうかをチェックする場合に便利です。

<script>
 var str = 'A';
 var num = parseInt(str);
 if( isNaN(num) ) {
 console.log( '変換失敗' );
}
</script>

アルファベットをparseInt関数で数値型に変換しようとしている為、変換に失敗して変数numにNaNが代入されます

エンコード・デコードに関する関数

f:id:bellsmarket:20150207234438p:plain

URLエンコード

Web上で文字列を送信する場合、全角文字や一部記号はそのままの状態では送信できないため、送信可能な特殊なコード(記号や英数字の羅列)に変換します

デコード

URLエンコードされて読めなくなった文字列を、再び読める状態に変換します。

encodeURIComponentの利用、decodeURIComponentの利用

JavaScriptで別のページにデータを送信する場合は、URLエンコードが行われません
encodeURIComponent関数を使って、URLエンコードを行う必要があります

<script>
 var encode = encodeURIComponent( 'ねこ' );
 console.log( encode );
 var decode = decodeURIComponent( encode );
 console.log( decode );
</script>

f:id:bellsmarket:20150207235222p:plain

topへ戻る