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;
}
};
長いので、これを１つのＪＳソースして使い回せるだろう。
テストサンプルは、、、
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 を馬鹿の１つ覚えのように使うのもどうなのかと。。。
