JavaScript で文字コードを加減算する方法

自分のサイトがあるのですが、そこを楽曲専用から汎用に大型アップデートしようと思いまして、
そこでリストの番号を

イメージ

  リスト
①text1
②text2
③text3

の様にしたかったんですね。数字が○で囲まれている文字です。
そこで、CSS で

合ってるかは知らないけどこんなの.css

ol li#list1:nth-child(1)::before {
    content: "①";
}
/*    :
      :    */

とか文字列配列作ってインデクスに応じて切り替えたり(？)で出来るんですが、
せっかくなら JavaScript で書きたくなったんですよ。
そのままテキストで①、②…と書けばいいものを…

#C/C++なら分かるぞ！
と思ったので一応書いておきます。C/C++ での実装の場合のイメージです。

C/C++の場合.cpp

std::string GetNumByCircle(int num)
{
    std::string res = '①' + num;
    return res;
}

実行結果のイメージ(入力は3)

④

これで今回の主題は達成するのですが、JavaScript で同じ様に書いてみましょうか。

JavaScriptの場合.js

function getNumByCircle(num)
{
    var res = '①' + num;
    return res;
}

実行結果のイメージ(入力は3)

①3

JavaScript では '...' も "..." も文字列で、+ は文字列結合演算子なので文字列結合が発生しました。
これでは、僕が実際に使おうとした方法でやると

他のバグもありますが、こうなりますよね。

...①6①5①4①3①2①1①0

#JavaScript で文字コードを加減算

では、JavaScript で「'①' + num」を考えてみましょう。


…分かりましたか？
では、僕が最終的に辿り着いた方法を紹介しましょう。

JavaScriptでのやり方.js

function getNumByCircle(num)
{
    var res = String.fromCharCode('①'.charCodeAt(0) + num);
    return res;
}

これで

実行結果のイメージ(入力は3)

④

となります。長いなぁ…。

#解説
解説編です。

###何が起こっているか
といえば、

1. 文字コードを取得
2. 取得した値に num を加算
3. その値を文字コードとした文字を取得

とやっているだけです。
因みに C/C++ の場合は、

1. char 型の整数値(=文字コード)に num を加算

これだけです。

###1. 文字コードを取得

この部分.js

/*function getNumByCircle(int num)
{
    var res = String.fromCharCode(*/ '①'.charCodeAt(0) /*+ num);
    return res;
}*/

文字列.charCodeAt(index: number)
文字列の index 番目の文字の文字コードを取得するメソッドです。
これで 文字型から整数型に変換するようなことをしています。

###2.取得した値に num を加算

この部分.js

/*function getNumByCircle(int num)
{
    var res = String.fromCharCode(*/ '①'.charCodeAt(0) + num /*);
    return res;
}*/

文字コード(整数値) + 整数値
書くとすればこういうことになりますね。単純に整数値同士の加算です。
C/C++ の方では「1.char 型の整数値(=文字コード)に num を加算」にあたる式です。

###1. 文字コードを取得

この部分.js

/*function getNumByCircle(int num)
{
    var res = */String.fromCharCode('①'.charCodeAt(0) + num)/*;
    return res;
}*/

String.fromCharCode(...codes: number[])
文字コード配列に対応する文字列を取得するメソッドです。
これで 整数型配列から文字型配列に変換するようなことをしています。

#まとめ

String.fromCharCode(str.charCodeAt(idx) + num)

で chr + num の様な事は可能！
…書きながら思いましたが、 str[idx] + num の方が JS に忠実ですね。

#おわりに
記事を書いている最中にメソッド名で調べたんですが、
どうやら String.charCodeAt(idx) では値の範囲によっては上手く動かないようです(例えば "🐤" 等)。
その理由や、どのメソッドを使用すればいいのかは自分で調べてみて下さい。
因みに、 String.fromCodePoint(codes) の方はこれで良いのでしょうか…？

さてさて、執筆はこの辺にして、ちゃんと各 <ol> の <li>:before に配置されるように修正しないとね。