文字列変換ライブラリ日付を日本語表示数字を億万表示

日付を日本語表示や数字を億万表示する場合、PHPで処理したのでは摘要箇所が多いとそれだけでコード量が増えメンテナンス性が悪い。<br>
これらをJavaScriptで処理させてしまうとすっきりするしサーバーの負荷も若干ながら下がるだろう。

この様なケースは個別対応や各種ライブラリを自作してきたがこの度比較的綺麗にまとまったので公開してみたいと思う。<br>
個人用で使用してきたため、これからも拡張されていくだろう。

## 使い方

data-strConvert属性を記述。
```
<div data-strConvert="dateJp">2020-5-15</div>
```

HTMLの最後(DOM形成後)にソースコード設置
```
<script defer src="strconvert.js"></script>
```

## ソースコード

strconvert.js

```
/**
 * 文字列変換
 *
 * <div data-strConvert="dateJp">2020-5-15</div> --> <div data-strConvert="dateJp">2020年05月15日</div>
 * <div data-strConvert="dateJpw">2020-5-15</div> --> <div data-strConvert="dateJpw">2020年05月15日(金)</div>
 * <div data-strConvert="dateJpsw">2020-5-15</div> --> <div data-strConvert="dateJpsw">2020/05/15(金)</div>
 * <div data-strConvert="dateCompact">2020-5-15</div> --> <div data-strConvert="dateCompact">20.05.15</div>
 * <div data-strConvert="dateTiny">2020-5-15</div> --> <div data-strConvert="dateTiny">5/15</div>
 * <div data-strConvert="timeSpan">00:00-00:00</div> --> <div data-strConvert="timeSpan">未定</div>		//00:00-00:00 未定, 00:00-23:59 終日, 10:00-17:30 10:00～17:30
 * <div data-strConvert="timePad">7:9</div> --> <div data-strConvert="timePad">07:09</div>
 * <div data-strConvert="numJp">123456789</div> --> <div data-strConvert="numJp">1億2345万6789</div>
 * <div data-strConvert="numJp1000">123456</div> --> <div data-strConvert="numJp">1億2345万6000</div>
 * <div data-strConvert="numFormat">12345.678</div> --> <div data-strConvert="numFormat">12,346</div>	//小数点以下は丸め
 * <div data-strConvert="numFormatDot">12345.678</div> --> <div data-strConvert="numFormatDot">12,345.678</div>	//小数点以下はそのまま
 * <div data-strConvert="ratio2">123/456</div> --> <div data-strConvert="ratio2">26.97</div>
 * <div data-strConvert="ratio2">26.9733</div> --> <div data-strConvert="ratio2">26.97</div>
 * <div data-strConvert="ratio2p">123/456</div> --> <div data-strConvert="ratio2p">26.97%</div>
 * <div data-strConvert="ratio2p">26.9733</div> --> <div data-strConvert="ratio2p">26.97%</div>
 * <div data-strConvert="minusColor">-123</div> --> <div data-strConvert="minusColor" style="color:red;">-123</div>
 * <td><div data-strConvert="timePadParentColor">21:9</div></td> --> <td style="background-color:#fa0;"><div data-strConvert="timePad">21:09</div></td>
 *
 * @author ao-system, Inc.
 * @date 2024-07-01
 */
(() => {
	'use strict';
	new class {
		#attribute = 'data-strConvert';
		#strConvertElms = [];
		constructor() {
			this.#strConvertElms = document.querySelectorAll('[' + this.#attribute + ']');
			this.#init();
		}
		#init() {
			for (let i = 0; i < this.#strConvertElms.length; i++) {
				const innerStr = String(this.#strConvertElms[i].innerHTML.replace(/^[ 　\t\r\n]+|[ 　\t\r\n]+$/g,''));	//前後のスペースを取り除いたinnerHTML
				const attr = this.#strConvertElms[i].getAttribute(this.#attribute);
				const attrs = attr.split(',');
				for (let j = 0; j < attrs.length; j++) {
					if (attrs[j] == 'dateJp') {
						this.#strConvertDateJp(this.#strConvertElms[i],innerStr);
					} else if (attrs[j] == 'dateJpw') {
						this.#strConvertDateJpw(this.#strConvertElms[i],innerStr);
					} else if (attrs[j] == 'dateJpsw') {
						this.#strConvertDateJpsw(this.#strConvertElms[i],innerStr);
					} else if (attrs[j] == 'dateCompact') {
						this.#strConvertDateCompact(this.#strConvertElms[i],innerStr);
					} else if (attrs[j] == 'dateTiny') {
						this.#strConvertDateTiny(this.#strConvertElms[i],innerStr);
					} else if (attrs[j] == 'timeSpan') {
						this.#strConvertTimeSpan(this.#strConvertElms[i],innerStr);
					} else if (attrs[j] == 'timePad') {
						this.#strConvertTimePad(this.#strConvertElms[i],innerStr);
					} else if (attrs[j] == 'timePadParentColor') {
						this.#strConvertTimePadParentColor(this.#strConvertElms[i],innerStr);
					} else if (attrs[j] == 'numJp') {
						this.#strConvertNumJp(this.#strConvertElms[i],innerStr);
					} else if (attrs[j] == 'numJp1000') {
						this.#strConvertNumJp1000(this.#strConvertElms[i],innerStr);
					} else if (attrs[j] == 'numFormat') {
						this.#strConvertNumFormat(this.#strConvertElms[i],innerStr);
					} else if (attrs[j] == 'numFormatDot') {
						this.#strConvertNumFormatDot(this.#strConvertElms[i],innerStr);
					} else if (attrs[j] == 'ratio1') {
						this.#strConvertRatio1(this.#strConvertElms[i],innerStr);
					} else if (attrs[j] == 'ratio2') {
						this.#strConvertRatio2(this.#strConvertElms[i],innerStr);
					} else if (attrs[j] == 'ratio1p') {
						this.#strConvertRatio1p(this.#strConvertElms[i],innerStr);
					} else if (attrs[j] == 'ratio2p') {
						this.#strConvertRatio2p(this.#strConvertElms[i],innerStr);
					} else if (attrs[j] == 'minusColor') {
						this.#strConvertMinusColor(this.#strConvertElms[i],innerStr);
					}
				}
			}
		}
		//dateJp
		#strConvertDateJp(elm,innerStr) {
			if (innerStr == '') {
				return;
			}
			const ary = this.#ymdToYmdAry(innerStr);
			if (ary[0] == '') {
				return;
			}
			const result = ary[0] + '年' + this.#strPad2(ary[1]) + '月' + this.#strPad2(ary[2]) + '日';
			elm.textContent = result;
		}
		//dateJpw
		#strConvertDateJpw(elm,innerStr) {
			if (innerStr == '') {
				return;
			}
			const ary = this.#ymdToYmdAry(innerStr);
			if (ary[0] == '') {
				return;
			}
			const date = new Date(parseInt(ary[0],10),parseInt(ary[1],10) - 1,parseInt(ary[2],10));
			const week = date.getDay();
			const result = ary[0] + '年' + this.#strPad2(ary[1]) + '月' + this.#strPad2(ary[2]) + '日(' + ['日','月','火','水','木','金','土'][week] + ')';
			elm.textContent = result;
		}
		//dateJpsw
		#strConvertDateJpsw(elm,innerStr) {
			if (innerStr == '') {
				return;
			}
			const ary = this.#ymdToYmdAry(innerStr);
			if (ary[0] == '') {
				return;
			}
			const date = new Date(parseInt(ary[0],10),parseInt(ary[1],10) - 1,parseInt(ary[2],10));
			const week = date.getDay();
			const result = ary[0] + '/' + this.#strPad2(ary[1]) + '/' + this.#strPad2(ary[2]) + '(' + ['日','月','火','水','木','金','土'][week] + ')';
			elm.textContent = result;
		}
		//dateCompact
		#strConvertDateCompact(elm,innerStr) {
			if (innerStr == '') {
				return;
			}
			const ary = this.#ymdToYmdAry(innerStr);
			if (ary[0] == '') {
				return;
			}
			const result = ary[0].slice(-2) + '.' + this.#strPad2(ary[1]) + '.' + this.#strPad2(ary[2]);
			elm.textContent = result;
		}
		//dateTiny
		#strConvertDateTiny(elm,innerStr) {
			if (innerStr == '') {
				return;
			}
			const ary = this.#ymdToYmdAry(innerStr);
			if (ary[0] == '') {
				return;
			}
			const result = Number(ary[1]) + '/' + Number(ary[2]);
			elm.textContent = result;
		}
		//timeSpan
		#strConvertTimeSpan(elm,innerStr) {
			if (innerStr.length != 11) {
				return;
			}
			const ary = (innerStr + '-').split('-');
			if (ary[0].length != 5 || ary[1].length != 5) {
				return;
			}
			let result = '';
			if (ary[0] == '00:00' && ary[1] == '00:00') {
				result = '未定';
			} else if (ary[0] == '00:00' && ary[1] == '23:59') {
				result = '終日';
			} else {
				result = ary[0] + '～' + ary[1];
			}
			elm.textContent = result;
		}
		//timePad
		#strConvertTimePad(elm,innerStr) {
			if (innerStr.indexOf(':') == -1) {
				return;
			}
			const ary = innerStr.split(':');
			elm.textContent = ('0' + ary[0]).slice(-2) + ':' + ('0' + ary[1]).slice(-2);
		}
		//timePadParentColor
		#strConvertTimePadParentColor(elm,innerStr) {
			if (innerStr.indexOf(':') == -1) {
				return;
			}
			const ary = innerStr.split(':');
			elm.textContent = ('0' + ary[0]).slice(-2) + ':' + ('0' + ary[1]).slice(-2);
			if (ary[0] >= 20) {
				elm.parentNode.style.backgroundColor = '#fc9';
			}
		}
		//numJp
		#strConvertNumJp(elm,innerStr) {
			String.prototype.lastFourNum = function() {
				return this.substr(strNum.length - 4).replace(/^0+/,'');
			}
			String.prototype.withoutLastFour = function() {
				return this.substr(0,this.length - 4);
			}
			//
			if (innerStr == '') {
				return;
			}
			const num = Math.round(innerStr);
			if (isNaN(num)) {
				return;
			}
			let strNum = String(num);
			let minusFlag = false;
			if (strNum.substr(0,1) == '-') {
				minusFlag = true;
				strNum = strNum.substr(1);
			}
			let ich = '';
			if (strNum.length > 4) {
				ich = strNum.lastFourNum();
				strNum = strNum.withoutLastFour();
			} else {
				ich = strNum;
				strNum = '';
			}
			let man = '';
			if (strNum.length > 4) {
				man = strNum.lastFourNum();
				strNum = strNum.withoutLastFour();
			} else {
				man = strNum;
				strNum = '';
			}
			let oku = '';
			if (strNum.length > 4) {
				oku = strNum.lastFourNum();
				strNum = strNum.withoutLastFour();
			} else {
				oku = strNum;
				strNum = '';
			}
			let cho = '';
			if (strNum.length > 4) {
				cho = strNum.lastFourNum();
				strNum = strNum.withoutLastFour();
			} else {
				cho = strNum;
				strNum = '';
			}
			let result = '';
			if (cho != '') {
				result += cho + '兆';
			}
			if (oku != '') {
				result += oku + '億';
			}
			if (man != '') {
				result += man + '万';
			}
			if (ich != '') {
				result += ich;
			}
			elm.textContent = (minusFlag ? '-':'') + result;
		}
		//numJp1000
		#strConvertNumJp1000(elm,innerStr) {
			if (innerStr == '') {
				return;
			}
			const num = parseInt(innerStr + '000');
			if (isNaN(num)) {
				return;
			}
			strConvertNumJp(elm,String(num));
		}
		//numFormat
		#strConvertNumFormat(elm,innerStr) {
			if (innerStr == '') {
				return;
			}
			const num = Math.round(innerStr);
			if (isNaN(num)) {
				return;
			}
			const str = String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
			elm.textContent = str;
		}
		//numFormatDot
		#strConvertNumFormatDot(elm,innerStr) {
			if (innerStr == '') {
				return;
			}
			const ary = innerStr.split('.');
			let str = String(ary[0]).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
			if (ary.length > 1) {
				str += '.' + ary[1];
			}
			elm.textContent = str;
		}
		//ratio1
		#strConvertRatio1(elm,innerStr) {
			if (innerStr == '') {
				return;
			}
			if (innerStr.indexOf('/') != -1) {
				const ary = innerStr.split('/');
				const num1 = parseInt(ary[0]);
				const num2 = parseInt(ary[1]);
				if (isNaN(num1) || isNaN(num2) || num2 == 0) {
					elm.textContent = '';
					return;
				}
				const ratio = (num1 / num2 * 100).toFixed(1);
				elm.textContent = ratio;
			} else {
				const num = parseFloat(innerStr);
				if (isNaN(num) || num == 0) {
					elm.textContent = '';
					return;
				}
				const ratio = num.toFixed(1);
				elm.textContent = ratio;
			}
		}
		//ratio2
		#strConvertRatio2(elm,innerStr) {
			if (innerStr == '') {
				return;
			}
			if (innerStr.indexOf('/') != -1) {
				const ary = innerStr.split('/');
				const num1 = parseInt(ary[0]);
				const num2 = parseInt(ary[1]);
				if (isNaN(num1) || isNaN(num2) || num2 == 0) {
					elm.textContent = '';
					return;
				}
				const ratio = (num1 / num2 * 100).toFixed(2);
				elm.textContent = ratio;
			} else {
				const num = parseFloat(innerStr);
				if (isNaN(num) || num == 0) {
					elm.textContent = '';
					return;
				}
				const ratio = num.toFixed(2);
				elm.textContent = ratio;
			}
		}
		//ratio1p
		#strConvertRatio1p(elm,innerStr) {
			if (innerStr == '') {
				return;
			}
			if (innerStr.indexOf('/') != -1) {
				const ary = innerStr.split('/');
				const num1 = parseInt(ary[0]);
				const num2 = parseInt(ary[1]);
				if (isNaN(num1) || isNaN(num2) || num2 == 0) {
					elm.textContent = '';
					return;
				}
				const ratio = (num1 / num2 * 100).toFixed(1);
				elm.textContent = ratio + '%';
			} else {
				const num = parseFloat(innerStr);
				if (isNaN(num) || num == 0) {
					elm.textContent = '';
					return;
				}
				const ratio = num.toFixed(1);
				elm.textContent = ratio + '%';
			}
		}
		//ratio2p
		#strConvertRatio2p(elm,innerStr) {
			if (innerStr == '') {
				return;
			}
			if (innerStr.indexOf('/') != -1) {
				const ary = innerStr.split('/');
				const num1 = parseInt(ary[0]);
				const num2 = parseInt(ary[1]);
				if (isNaN(num1) || isNaN(num2) || num2 == 0) {
					elm.textContent = '';
					return;
				}
				const ratio = (num1 / num2 * 100).toFixed(2);
				elm.textContent = ratio + '%';
			} else {
				const num = parseFloat(innerStr);
				if (isNaN(num) || num == 0) {
					elm.textContent = '';
					return;
				}
				const ratio = num.toFixed(2);
				elm.textContent = ratio + '%';
			}
		}
		//minusColor
		#strConvertMinusColor(elm,innerStr) {
			if (innerStr == '') {
				return;
			}
			if (innerStr.substr(0,1) != '-') {
				return;
			}
			elm.style.color = '#c00';
		}

//------common-------------------------------------

//日付文字列を年月日の配列で返す
		//'2020-5-12' または '2020/5/12' または '20200512' を [2020,5,12] で返す
		#ymdToYmdAry(str) {
			str = str.replace(/\//g,'-');
			if (str.indexOf('-') == -1 && str.length == 8) {
				str = str.substr(0,4) + '-' + str.substr(4,2) + '-' + str.substr(6,2);
			}
			const ary = (str + '--').split('-');
			const y = parseInt(ary[0]);
			if (isNaN(y) || y < 1900 || y > 3000) {
				return ['','',''];
			}
			return ary;
		}
		//左を'0'で埋めた2桁を返す
		#strPad2(str) {
			return ('00' + str).slice(-2);
		}
	}
})();
```

文字列変換ライブラリ日付を日本語表示数字を億万表示

動画

画像

アイコン

文字列

QRコード

Excel

SVG

読み上げ

HTML,CSS

色

3D

音

ビット、バイト

データベース

カレンダー系

IPv4,IPv6

インターネット

開発

ビンゴ大会開催システム(Wタイプ) 自動更新

ビンゴ(Pタイプ) 自動更新

ビンゴ(Aタイプ) 抽選機+カード

ビンゴ(Mタイプ) 手動更新

抽選機等

パズル、ゲーム

他

文字列変換ライブラリ 日付を日本語表示 数字を億万表示

動画

画像

アイコン

文字列

QRコード

Excel

SVG

読み上げ

HTML,CSS

色

3D

音

ビット、バイト

データベース

カレンダー系

IPv4,IPv6

インターネット

開発

ビンゴ大会開催システム(Wタイプ) 自動更新

ビンゴ(Pタイプ) 自動更新

ビンゴ(Aタイプ) 抽選機+カード

ビンゴ(Mタイプ) 手動更新

抽選機等

パズル、ゲーム

他

文字列変換ライブラリ日付を日本語表示数字を億万表示