【JavaScript】正規表現を使って数字をカンマ区切りで表示する

React Native で 数字を三桁カンマ区切りで表示しようとしたら、toLocaleString() が使えなかったので、その代替方法についてです。
タイトルにもある通り、私は正規表現を使用することにしました。

今回参考にさせていただいた記事はこちら！

JavaScriptの正規表現で数値を3桁カンマ区切りの文字列に変更する – Qiita
https://qiita.com/hikey/items/8f8b13ba4942377a5754

さて実装方法ですが、数字を三桁のカンマ区切りに変換する正規表現は下記の通りです。

const result = ([変換したい数字].toString()).replace(/\B(?=(\d{3})+(?!\d))/g, ',');

こちらをそのままプロジェクトに追加しても良かったのですが、複数個所で使いそうだったのでコンポーネント化することにしました。
それがこちら。

import React from 'react';
import PropTypes from 'prop-types';
import { Text } from 'react-native';

const NumberFormat = props => {
  const result = (props.number.toString()).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  return (
    <Text>{`${result}${props.unit}`}</Text>
  );
}
NumberFormat.propTypes = {
  number: PropTypes.number.isRequired,
  unit: PropTypes.string,
};
export default NumberFormat;

使用するときは下記のように記述します。

<NumberFormat number={変換したい数字} unit={単位} />

number に変換したい数値を指定すれば、<Text> コンポーネントで囲われた三桁カンマ区切りの文字列が表示されます！
なお、こちらはオプションですが、unit にキログラムや枚など、後ろに追加したい単位も付けられるようにしました。
…別にこれは無くても全く問題ありません。

正規表現の詳しい解説については、参考サイトに掲載されていましたので、そちらをご参考ください。
…というか、私もまだしっかりと理解できていませんので、後ほど読み直したいと思います。

以上。JavaScript で正規表現を使って数字を三桁カンマ区切りで表示する方法についてでした。
ご参考になれば幸いです。