[JS] 条件分岐や、数値と文字列の変換、小数点切り捨てなどの短縮された書き方いろいろ

[JS] 条件分岐や、数値と文字列の変換、小数点切り捨てなどの短縮された書き方いろいろ

他の方が書いたコードなどをみていると、意味が分かりそうで分からない JavaScript の書き方にしばしば遭遇します。そういった、本などではあまり紹介されていないけど実際のコードでは使われていたりする短縮された書き方のメモです。

条件分岐に関するもの

三項演算子で書く

書式
    (条件式) ? 条件に当てはまる時の処理 : 当てはまらない時の処理 ;
    
例)変数 num の数値が5以上の場合は true 、それ以外なら false を変数 val へ代入
    val = (num > 5)? true : false;
    
略さない書き方
    if(num > 5){
        val = true;
    } else {
        val = false;
    }
    

if 文の true の場合だけ処理を書く

書式
    if(条件式) 条件に当てはまる時の処理 ;
    
例)変数の数値が5以上の場合は false を返す。
    if(val > 5) return false;
    
略さない書き方
    if(val > 5){
        return false;
    };
    

true と false を切り替える

書式
    変数 = !変数 ; 
    
例)true の入った 変数 val を false に切り替える

変数に !(否定演算子)を適用すると中身が逆転して、true だった val の中身は false に変換される。

    val = true;
    val = !val
    
略さない書き方
    val = true;
    if(val === true){
		val = false;
	}else{
		val = true;
	};
    

数値と文字列の変換に関するもの

文字列を整数に変換する(2パターン)

書式1
    +変数 ; 
    

変数の前に + を付けると数値に変換される。

例)変数 val に入った文字列の 5 を数値の 5 に変換する
    val = '5' ;
    +val ;    
    
書式2
    変数 - 0; 
    

変数から 0 を減算すると数値に変換される。

例)文字列の 5 を数値に変換してから 5 を足す
    val = '5' ;
    val = (val - 0) + 5 ;
    
    // console.log(val) ; → 結果は 10 になる   
    
略さない書き方
    val = '5' ;
    num = parseInt(val);
    num = parseFloat(val);
    num = Number(val);
    

整数を文字列に変換する

書式
    変数 + ''; 
    

変数に空文字をたすと文字列へ変換される。

例)変数 val に入った数値の 5 を文字列の 5 に変換する
    val = 5 ;
    val = val + ''  
    

上記で文字列に変換された 5 に数値の5を足しても。足し算にならず、文字列の連結という結果になる。

    val = val + 5;
    // console.log(val) ; → 結果は 55 になる   
    
略さない書き方
    val = 5 ;
    str = String(val) ;
    str = val.toString();
    

小数点を切り捨てる(2パターン)

書式1
    変数|0
    
例)変数 val に入った小数点の数字を切り捨てる
    val = 5.234 ;
    val = val|0 ;
    // console.log(val) ; → 結果は 5  
    
書式2
    ~~変数
    

変数の前に ~~ をつける。

例)変数 val に入った小数点の数字を切り捨てる
    val = 5.234 ;
    val = ~~val ;
    // console.log(val) ; → 結果は 5  
    
略さない書き方
    val = 5.234 ;
    val = Math.floor(val) ;
    

また見つけたら追記したいなと思います。こういった書き方は慣れたら便利そうですが、よくわからないうちはなかなかとまどってしまいますね…。

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能