三項演算子の利用例01

三項演算子は各種言語で利用できますが、言語解説書では演算子の末席で紹介されるか、されないか、その扱い僅かです。
しかし、特にJavascriptでは表示する文字列を構造化して作成したりするのに有効です。ここでは条件によって文字を切り替える場合の活用例を紹介します。

三項演算子の利用例０１

配列で与えられた関東6都県に、配列であら得られたon/off値に合わせてチェックマークを頭に付けて表示します。

<!DOCTYPE html>
<html lang="UTF-8">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>二項演算子の利用01</title>
    <style>
        #wrapper{width: 500px; font-size: 26px;}
        dt{background: lightblue; padding:4px; margin-top:8px;}
        dd{margin:2px;}
    </style>
</head>
<body>
    <div id="wrapper">
        <h1>二項演算子の利用01</h1>
        <script type="text/javascript">
            let pref = ['東京', '神奈川', '千葉', '埼玉', '茨城', '栃木', '群馬' ];
            let check = [ 0, 1, 0, 0, 1, 1, 0 ];
            let str = '';
            let checkMark;
             
            for ( i=0; i<pref.length; i++ ) {
                checkMark = check[i] >= 1 ? '<img draggable="false" class="emoji" alt="" src="https://s.w.org/images/core/emoji/2.2.1/svg/2611.svg">' : '☐';
                str += checkMark + ' ' + pref[i]+'<br />';
            }
            document.write("<p>" + str + "</p>");
        </script>
    </div>
</body>
</html>

三項演算子の利用例01

カテゴリー