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

カテゴリー：JavaScript

記事作成日：2022-01-07

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

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

## 使い方

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

HTMLの最後(DOM形成後)にソースコード設置
```
<script 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="dateCompact">2020-5-15</div> --> <div data-strConvert="dateCompact">20.05.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.
 *
 */
(() => {
	const _attribute = 'data-strConvert';
	const _strConvertElms = document.querySelectorAll('[' + _attribute + ']');
	//
	init();
	function init() {
		for (let i = 0; i < _strConvertElms.length; i++) {
			const innerStr = String(_strConvertElms[i].innerHTML.replace(/^[ 　\t\r\n]+|[ 　\t\r\n]+$/g,''));	//前後のスペースを取り除いたinnerHTML
			const attr = _strConvertElms[i].getAttribute(_attribute);
			const attrs = attr.split(',');
			for (let j = 0; j < attrs.length; j++) {
				if (attrs[j] == 'dateJp') {
					strConvertDateJp(_strConvertElms[i],innerStr);
				} else if (attrs[j] == 'dateJpw') {
					strConvertDateJpw(_strConvertElms[i],innerStr);
				} else if (attrs[j] == 'dateCompact') {
					strConvertDateCompact(_strConvertElms[i],innerStr);
				} else if (attrs[j] == 'timeSpan') {
					strConvertTimeSpan(_strConvertElms[i],innerStr);
				} else if (attrs[j] == 'timePad') {
					strConvertTimePad(_strConvertElms[i],innerStr);
				} else if (attrs[j] == 'timePadParentColor') {
					strConvertTimePadParentColor(_strConvertElms[i],innerStr);
				} else if (attrs[j] == 'numJp') {
					strConvertNumJp(_strConvertElms[i],innerStr);
				} else if (attrs[j] == 'numJp1000') {
					strConvertNumJp1000(_strConvertElms[i],innerStr);
				} else if (attrs[j] == 'numFormat') {
					strConvertNumFormat(_strConvertElms[i],innerStr);
				} else if (attrs[j] == 'numFormatDot') {
					strConvertNumFormatDot(_strConvertElms[i],innerStr);
				} else if (attrs[j] == 'ratio1') {
					strConvertRatio1(_strConvertElms[i],innerStr);
				} else if (attrs[j] == 'ratio2') {
					strConvertRatio2(_strConvertElms[i],innerStr);
				} else if (attrs[j] == 'ratio1p') {
					strConvertRatio1p(_strConvertElms[i],innerStr);
				} else if (attrs[j] == 'ratio2p') {
					strConvertRatio2p(_strConvertElms[i],innerStr);
				} else if (attrs[j] == 'minusColor') {
					strConvertMinusColor(_strConvertElms[i],innerStr);
				}
			}
		}
	}
	//dateJp
	function strConvertDateJp(elm,innerStr) {
		if (innerStr == '') {
			return;
		}
		const ary = ymdToYmdAry(innerStr);
		if (ary[0] == '') {
			return;
		}
		const result = ary[0] + '年' + strPad2(ary[1]) + '月' + strPad2(ary[2]) + '日';
		elm.innerHTML = result;
	}
	//dateJpw
	function strConvertDateJpw(elm,innerStr) {
		if (innerStr == '') {
			return;
		}
		const ary = 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] + '年' + strPad2(ary[1]) + '月' + strPad2(ary[2]) + '日(' + ['日','月','火','水','木','金','土'][week] + ')';
		elm.innerHTML = result;
	}
	//dateCompact
	function strConvertDateCompact(elm,innerStr) {
		if (innerStr == '') {
			return;
		}
		const ary = ymdToYmdAry(innerStr);
		if (ary[0] == '') {
			return;
		}
		const result = ary[0].slice(-2) + '.' + strPad2(ary[1]) + '.' + strPad2(ary[2]);
		elm.innerHTML = result;
	}
	//timeSpan
	function 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.innerHTML = result;
	}
	//timePad
	function strConvertTimePad(elm,innerStr) {
		if (innerStr.indexOf(':') == -1) {
			return;
		}
		const ary = innerStr.split(':');
		elm.innerHTML = ('0' + ary[0]).slice(-2) + ':' + ('0' + ary[1]).slice(-2);
	}
	//timePadParentColor
	function strConvertTimePadParentColor(elm,innerStr) {
		if (innerStr.indexOf(':') == -1) {
			return;
		}
		const ary = innerStr.split(':');
		elm.innerHTML = ('0' + ary[0]).slice(-2) + ':' + ('0' + ary[1]).slice(-2);
		if (ary[0] >= 20) {
			elm.parentNode.style.backgroundColor = '#fc9';
		}
	}
	//numJp
	function 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 ichi = '';
		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) {
			cyo = strNum.lastFourNum();
			strNum = strNum.withoutLastFour();
		} else {
			cyo = strNum;
			strNum = '';
		}
		let result = '';
		if (cyo != '') {
			result += cyo + '兆';
		}
		if (oku != '') {
			result += oku + '億';
		}
		if (man != '') {
			result += man + '万';
		}
		if (ich != '') {
			result += ich;
		}
		elm.innerHTML = (minusFlag ? '-':'') + result;
	}
	//numJp1000
	function strConvertNumJp1000(elm,innerStr) {
		if (innerStr == '') {
			return;
		}
		const num = parseInt(innerStr + '000');
		if (isNaN(num)) {
			return;
		}
		strConvertNumJp(elm,String(num));
	}
	//numFormat
	function 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.innerHTML = str;
	}
	//numFormatDot
	function 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.innerHTML = str;
	}
	//ratio1
	function 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.innerHTML = '';
				return;
			}
			const ratio = (num1 / num2 * 100).toFixed(1);
			elm.innerHTML = ratio;
		} else {
			const num = parseFloat(innerStr);
			if (isNaN(num) || num == 0) {
				elm.innerHTML = '';
				return;
			}
			const ratio = num.toFixed(1);
			elm.innerHTML = ratio;
		}
	}
	//ratio2
	function 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.innerHTML = '';
				return;
			}
			const ratio = (num1 / num2 * 100).toFixed(2);
			elm.innerHTML = ratio;
		} else {
			const num = parseFloat(innerStr);
			if (isNaN(num) || num == 0) {
				elm.innerHTML = '';
				return;
			}
			const ratio = num.toFixed(2);
			elm.innerHTML = ratio;
		}
	}
	//ratio1p
	function 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.innerHTML = '';
				return;
			}
			const ratio = (num1 / num2 * 100).toFixed(1);
			elm.innerHTML = ratio + '%';
		} else {
			const num = parseFloat(innerStr);
			if (isNaN(num) || num == 0) {
				elm.innerHTML = '';
				return;
			}
			const ratio = num.toFixed(1);
			elm.innerHTML = ratio + '%';
		}
	}
	//ratio2p
	function 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.innerHTML = '';
				return;
			}
			const ratio = (num1 / num2 * 100).toFixed(2);
			elm.innerHTML = ratio + '%';
		} else {
			const num = parseFloat(innerStr);
			if (isNaN(num) || num == 0) {
				elm.innerHTML = '';
				return;
			}
			const ratio = num.toFixed(2);
			elm.innerHTML = ratio + '%';
		}
	}
	//minusColor
	function 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] で返す
	function 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桁を返す
	function strPad2(str) {
		return ('00' + str).slice(-2);
	}
})();
```

CONTENTS

Android

Androidアプリの合計ダウンロード数、iOSアプリの合計ダウンロード数

Flutter

Android Studio. Could not determine java version. Unable to find bundled Java version.

その他

XAMPPのMySQLを復旧

ブラウザ

各ブラウザでのキャッシュクリアまとめ

JavaScript

JavaScriptで動画読み込み

Unreal Engine