こんにちは、フロントエンドエンジニアのまさにょんです!
今回は、null や undefined の data だったら空文字に変換する処理の実装について解説していきます。
今回の解説には、以前紹介した「Null-合体演算子」(「??」)を使用します。
「Null-合体演算子」がわからない人は、先にこちらの記事をCheckしてみてください!
目次
null や undefined の data である場合は、空文字に変換する処理
null や undefined の data だったら空文字に変換する処理は、Web画面に出力するFrontEndだと必要になったりするので、ぜひ活用してみてください!
先輩がこの記法使ってるのを見て、かっこいいと思いました!
// < null や undefined の value・data である場合は、空文字に変換する SmartなLogic >
const projectInfo = {
project_name: 'ロボ玉-Project',
group_name: 'ロボ玉組',
from: 'グンマー帝国',
cost: 1200,
saitama: null,
robotama_flag: true,
robo_power: undefined,
};
const PrintData = (projectObj, key) => {
const val = projectObj[key];
switch (key) {
case 'robotama_flag':
console.log('robotamaFlag-Call-ロボ玉!');
break;
default:
// [ 今回のPoint ]
// 「??」 により、null や undefined なら 「''」(空文字)を返す!
return `${val ?? ''}`;
// 上記の記述の方が、より短くSmartにかける! => 三項演算子で記述すると次のように長くなる!
// return ( v === undefined || v === null) ? '' : `${v}`;
}
};
for (const key in projectInfo) {
const printVal = PrintData(projectInfo, key);
console.log(`${key}: ${printVal}`);
}
// < 出力結果 >
// project_name: ロボ玉-Project
// group_name: ロボ玉組
// from: グンマー帝国
// cost: 1200
// saitama:
// robotamaFlag-Call-ロボ玉!
// robotama_flag: undefined
// robo_power:
JavaScript書籍 Ver. 中級-上級者向け
JavaScript書籍 Ver. 初級者向け
最近の投稿





