なんとなく「文字の長さを揃えたいな〜」って時、つい自分でスペースや数字を手動で足したりしてなかった？わたしはめちゃくちゃやってたんだけど、JavaScriptにはちゃんとそのためのメソッドがあるんだって知って、かなりびっくりした😳
padStart と padEnd で文字列の長さを調整できるんだよ🌸
例えば数字をゼロパディングしたいとき、いままでこんなコードを書いてたひと、いると思うんだよね👇
let num = '7';
while (num.length < 3) {
num = '0' + num;
}
// → "007"
でも実は、JavaScriptの文字列には
padStart(targetLength, padString) と
padEnd(targetLength, padString) っていう便利なメソッドがある✨
これ使うとこうなるよ👇
let num = '7';
num = num.padStart(3, '0'); // "007"
なるほどね…？って感じじゃない？💭
わたしも友達に聞くまで全然知らなかった🥺
フォームのsubmitでJavaScriptを直接実行できるって知ってた？🤔
さらに、これもびっくりしたけど
formタグのactionに
javascript:console.log('送信されたよ！')
みたいに書くと、フォーム送信のときにJavaScriptが直接走るんだって💬
普通は送信先URLを指定するところだけど、こういう使い方もあるのか〜って思った😆
テストとかデバッグのときにちょっと便利かも？🌸
data属性の取り扱いがもっとラクに！element.dataset✨
あとは、HTMLの要素に data-productId="123" とか属性つけてること、よくあるよね？
これ、JavaScriptでまとめて取得するときって意外と面倒じゃない？👀
でも実は、
element.dataset
ってやると、data属性がオブジェクトとしてぜーんぶ取れちゃうんだよね❣️
例えば
<div id="item1" data-product-id="123" data-category="books"></div>
const el = document.getElementById('item1');
console.log(el.dataset.productId); // "123"
console.log(el.dataset.category); // "books"
こんな感じで、カンタンにアクセスできちゃう✨
この便利さ、使わないと損かも〜💗
というわけで、今日はわたしが最近知って「なんで今まで誰も教えてくれなかったの！？」って思ったJSの便利技3つを紹介してみたよ🎀
padStart/padEndで文字列の長さ調整、
フォームのactionでJavaScriptを直接実行、
data属性はdatasetでまとめて取得、
このあたりは知っておいて損しないし、ちょっとした手間が減るからぜひ試してみてね🤗✨
はてな
コメント
キンバリー
`JSON.stringify`はインデント指定で見やすく出力できるよ：`JSON.stringify(obj, null, 2)`
ミア
ループに名前を付けて特定のループだけbreakやcontinueできるの、知ってる？
リリー
「Leftpad」の悪夢を思い出すなあ。
クリス
HTMLのidは自動でグローバル変数になるから、思わぬ衝突に注意だよ。
ロバート
昔働いてた大手企業で、ユーザーの名字をidにしてバグった話があったんだ。
キンバリー
Intl APIなら追加ライブラリなしで数字や通貨、日付のフォーマットが簡単にできるよ。
ハンナ
新しい開発者はぜひES6からちゃんと学んで、古いStackoverflowには頼らない方がいいよ。
レオ
文字列の.searchメソッドはマジで神機能。
グレース
ECMAScriptは毎年新しいバージョンが出るから、常に最新を追わないとね。
ミア
localStorageやsessionStorageはオブジェクトみたいに直接値の読み書きできるよ。
クリス
話してるのはJavaScriptじゃなくてDOM APIで、ブラウザ依存が大きいから注意してね。
ノーラン
インラインJavaScriptはセキュリティポリシーとか面倒になるから、デバッグはブレークポイント使ったほうがいいよ。
ジョージ
actionにjavascript:があるのはアドレスバーからJSを実行できるからで、ブックマークレットの仕組みだよ。
エイダン
ブラウザのData URIスキームを使ったファイルのエンコードとかも楽しいよね。
チャーリー
新しいCSSプロパティを見つけるたびに感動するんだ、わかる？
ハンナ
これは煽り？
ベン
JSの知られてない部分は実はWebのDOM APIだったりする。 API一覧を見ると驚くよ。
