JavaScriptコードの中で日付データのJSONとDateオブジェクトの変換をどうしようと悩んでたら、
なるほどと思う記事を見つけた。
【JavaScript】JSON.stringify/parse をカスタマイズしてDate型とかを使えるようにする - 藤 遥のブログ
ありがたく書いて頂いてるのですが、惜しいのは書かれていた const 宣言関数は、
const CustomJSON = { replacer (key, value) { :
となっていて、replacer (key, value) と "{" の間に、":" が抜けているので、IE11 ではエラーになってしまう。
SCRIPT1003: ':'がありません
JSON.stringify / parse 第2引数にコールバックされる関数を与えることに思わず「なるほどそういう方法が。。」
そこで、もう少しでも汎用的にならないかと、parse はどうしても無理と思ったが stringify だけでもと思い書いた。
const JsonDate = { UTC:function(key, value){ if (this[key] instanceof Date){ return this[key].getTime(); } return value; }, YMD:function(key, value){ if (this[key] instanceof Date){ return this[key].getFullYear() +"-"+ ("00"+(this[key].getMonth()+ 1)).slice(-2) +"-"+ ("00"+(this[key].getDate())).slice(-2); } return value; }, YMD_slash:function(key, value){ if (this[key] instanceof Date){ return this[key].getFullYear() +"/"+ ("00"+(this[key].getMonth()+ 1)).slice(-2) +"/"+ ("00"+(this[key].getDate())).slice(-2); } return value; }, YYYYMMDD:function(key, value){ if (this[key] instanceof Date){ return this[key].getFullYear() + ("00"+(this[key].getMonth()+ 1)).slice(-2) + ("00"+(this[key].getDate())).slice(-2); } return value; }, YMDHMS:function(key, value){ if (this[key] instanceof Date){ return this[key].getFullYear() +"-"+ ("00"+(this[key].getMonth()+ 1)).slice(-2) +"-"+ ("00"+(this[key].getDate())).slice(-2) +" "+ ("00"+(this[key].getHours())).slice(-2) +":"+ ("00"+(this[key].getMinutes())).slice(-2) +":"+ ("00"+(this[key].getSeconds())).slice(-2); } return value; }, YMDHMSL:function(key, value){ if (this[key] instanceof Date){ return this[key].getFullYear() +"-"+ ("00"+(this[key].getMonth()+ 1)).slice(-2) +"-"+ ("00"+(this[key].getDate())).slice(-2) +" "+ ("00"+(this[key].getHours())).slice(-2) +":"+ ("00"+(this[key].getMinutes())).slice(-2) +":"+ ("00"+(this[key].getSeconds())).slice(-2) + "." ("000"+(this[key].getMilliseconds())).slice(-3); } return value; }, parseYMD:function(str){ return new Date(str + " 00:00:00"); }, parseYYYYMMDD:function(str){ return new Date(str.slice(0,4) +"-"+ str.slice(4, 6) +"-"+ str.slice(-2) + " 00:00:00"); }, parseYMDHMSL:function(str){ var d = new Date(str.slice(0,19)); d.setMilliseconds(str.slice(-3)); return d; } };
長いので、これを1つのJSソースして使い回せるだろう。
テストサンプルは、、、
var dt = new Date(); var data = { a:dt, "b":"test" };
JsonDate.UTC テスト
var txt = JSON.stringify(data, JsonDate.UTC, ' '); var obj = JSON.parse(txt, function(key, value){ if (key === 'a'){ return new Date(value); } return value; });
JsonDate.YMD テスト
var txt = JSON.stringify(data, JsonDate.YMD, ' '); var obj = JSON.parse(txt, function(key, value){ if (key === 'a'){ return JsonDate.parseYMD(value); } return value; });
JsonDate.YMD_slash テスト
var txt = JSON.stringify(data, JsonDate.YMD_slash, ' '); var obj = JSON.parse(txt, function(key, value){ if (key === 'a'){ return JsonDate.parseYMD(value); } return value; });
JsonDate.YYYYMMDD テスト
var txt = JSON.stringify(data, JsonDate.YYYYMMDD, ' '); var obj = JSON.parse(txt, function(key, value){ if (key === 'a' && value){ return JsonDate.parseYYYYMMDD(value); } return value; });
JsonDate.YMDHMS テスト
var txt = JSON.stringify(data, JsonDate.YMDHMS, ' '); var obj = JSON.parse(txt, function(key, value){ if (key === 'a' && value){ return new Date(value); } return value; });
JsonDate.YMDHMSL テスト
var txt = JSON.stringify(data, JsonDate.YMDHMSL, ' '); var obj = JSON.parse(txt, function(key, value){ if (key === 'a' && value){ return JsonDate.parseYMDHMSL(value); } return value; });
しかし、JavaScript で日付の処理と言えば、
やはり Moment.js | Home である。
この場面では、parse ぐらいしか思いつかないが、、
moment.js を使えば、JsonDate.YYYYMMDD と JsonDate.YMDHMSL の parse は、
関数は書く必要なく
var txt = JSON.stringify(data, JsonDate.YYYYMMDD, ' '); var obj = JSON.parse(txt, function(key, value){ if (key === 'a' && value){ return moment(str, "YYYYMMDD").toDate(); } return value; });
var txt = JSON.stringify(data, JsonDate.YMDHMSL, ' '); var obj = JSON.parse(txt, function(key, value){ if (key === 'a' && value){ return moment(str, "YYYY-MM-DD HH:mm:ss.SSS").toDate(); } return value; });
とも書けるが、momentインスタンス生成する分の処理時間はかかるので
moment.js を馬鹿の1つ覚えのように使うのもどうなのかと。。。