文字列を左右にシフトしてずらす方法（JavaScript）

JavaScriptで、文字列（String）を左または右にずらす方法を説明します。

例えば、「あいうえお」を右に2つシフトする場合、「えおあいう」となります。

jQueryを利用したコードになります。

以下、HTML。

シフトの方向：
<input type="radio" id="shiftr" name="shiftradio" value="shiftl" checked><b>左</b>
<input type="radio" id="shiftl" name="shiftradio" value="shiftr"><b>右</b>
<br>
シフト数（半角整数）：
<input id="shiftnum" style="width: 50px;" type="text" value="1">
<br><br>
【原文】
<div id="plain">あいうえお</div><br>
<button id="covertbtn">変換ボタン</button><br><br>
【変換後】
<div id="converted">あいうえお</div>

以下、JavaScript。

$(function(){
    function shiftstr(str, direction, num) {
        if (str.length < num) {
            num = num % str.length;
        }
        if (direction == 'shiftl') {  // 左シフト
            return str.slice(num) + str.slice(0, num);
        } else {  // 右シフト
            return str.slice(str.length - num) + str.slice(0, str.length - num);
        }
    }
    
    $('#covertbtn').on('click', function () {
        $('#converted').text(shiftstr($('#plain').text(), $('input[name="shiftradio"]:checked').val(), $('#shiftnum').val())); 
    });
});

HTMLでは、文字列をシフトする方向とシフトする数を入力できるようにします。

JavaScriptでは、まず、シフト数が文字列の長さより大きい場合に、例えば、「あいうえお」を右に7文字シフトすることは、右に2文字シフトするのと同等になるので、

num = num % str.length;

をして、文字列の長さ以内のシフト数に変換しておきます。

左シフトのときは、

str.slice(num) + str.slice(0, num);

例えば、「あいうえお」を左に2つシフトする場合、「うえお」＋「あい」のようにして「うえおあい」と変換します。

右シフトのときは、

str.slice(str.length – num) + str.slice(0, str.length – num);

例えば、「あいうえお」を右に2つシフトする場合、「えお」＋「あいう」のようにして「えおあいう」と変換します。

以上のように、文字列の中の指定された範囲の部分の文字列を返す、sliceメソッドを上手く使うことで、文字列をシフトできます。

Webアプリの「もじいじり」は、このコードを利用しています。