20種類のキラーなJavaScriptワンライナー ☝️
2021年9月19日に投稿され、2021年12月1日に更新されました。
こんにちは、みなさん 👋
ここにいるサビオです。成功するウェブ開発者として成長することを目指す若手デベロッパーです。Reactでウェブアプリを作るのが大好きです。フロントエンド技術では自分の優越性を証明したことがあります。
今日は、人生を楽にする20種類のキラーなJavaScriptワンライナーを共有したいと思います。さあ、行きましょう 🚀
ブラウザのクッキーの値を取得する
document.cookie を使ってクッキーの値を取得します。
const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();
cookie('_ga');
// 結果: "GA1.2.1929736587.1601974046"
RGBをヘックスに変換する
const rgbToHex = (r, g, b) =>
"#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
rgbToHex(0, 51, 255);
// 結果: #0033ff
クリップボードにコピーする
navigator.clipboard.writeText を使用して、任意のテキストをクリップボードに簡単にコピーします。
const copyToClipboard = (text) => navigator.clipboard.writeText(text);
copyToClipboard("Hello World");
日付が有効かどうかをチェックする
以下のコードスニペットを使用して与えられた日付が有効かどうかをチェックします。
const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
isDateValid("December 17, 1995 03:24:00");
// 結果: true
年の日を見つける
与えられた日付で何日目かを見つけます。
const dayOfYear = (date) =>
Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
dayOfYear(new Date());
// 結果: 272
文字列を大文字にする
JavaScriptには組み込みの大文字化機能がないので、次のコードを使用します。
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
capitalize("follow for more")
// 結果: Follow for more
2つの日の間の日数を見つける
次のコードスニペットを使用して、2つの与えられた日の間の日数を割り出します。
const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
dayDif(new Date("2020-10-21"), new Date("2021-10-22"))
// 結果: 366
すべてのクッキーをクリアする
document.cookie を使ってウェブページに保存されているすべてのクッキーを簡単に消去できます。
const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));
ランダムなヘックスを生成する
Math.random と padEnd のプロパティを使ってランダムなヘックスカラーを生成できます。
const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
console.log(randomHex());
// 結果: #92b008
配列から重複を取り除く
Set を使ってJavaScriptで簡単に重複を取り除けます。本当にライフセーバーです。
const removeDuplicates = (arr) => [...new Set(arr)];
console.log(removeDuplicates([1, 2, 3, 3, 4, 4, 5, 5, 6]));
// 結果: [ 1, 2, 3, 4, 5, 6 ]
URLからクエリパラメータを取得する
window.location を渡すか、または生のURL google.com?search=easy&page=3 から簡単にクエリパラメータを取得できます。
const getParameters = (URL) => {
URL = JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') +'"}');
return JSON.stringify(URL);
};
getParameters(window.location)
// 結果: { "search" : "easy", "page" : 3 }
日付から時間をログする
hour::minutes::seconds の形式で与えられた日付から時間をログできます。
const timeFromDate = date => date.toTimeString().slice(0, 8);
console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0)));
// 結果: "17:30:00"
数が偶数か奇数かをチェックする
const isEven = num => num % 2 === 0;
console.log(isEven(2));
// 結果: True
数字の平均を見つける
reduce メソッドを使って複数の数字間の平均値を見つけます。
const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4);
// 結果: 2.5
トップにスクロールする
window.scrollTo(0, 0) メソッドを使用してトップに自動スクロールします。x と y を0に設定します。
const goToTop = () => window.scrollTo(0, 0);
goToTop();
文字列を反転させる
split, reverse, join メソッドを使って簡単に文字列を反転させます。
const reverse = str => str.split('').reverse().join('');
reverse('hello world');
// 結果: 'dlrow olleh'
配列が空かどうかをチェックする
配列が空かどうかをチェックするシンプルなワンライナーで、true または false を返します。
const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;
isNotEmpty([1, 2, 3]);
// 結果: true
選択されたテキストを取得する
組み込みの getSelection プロパティを使ってユーザーが選択したテキストを取得します。
const getSelectedText = () => window.getSelection().toString();
getSelectedText();
配列をシャッフルする
sort と random メソッドを使って配列を超簡単にシャッフルできます。
const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
console.log(shuffleArray([1, 2, 3, 4]));
// 結果: [ 1, 4, 3, 2 ]
ダークモードを検出する
以下のコードを使って、ユーザーのデバイスがダークモードかどうかをチェックします。
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode) // 結果: TrueまたはFalse
👀 最後に
はい、それで全部です。この記事を楽しんでいただけたら嬉しいです。フィードバックを共有することをためらわないでください。私はTwitter @saviomartin7 にいます。フォローしてください！
私のGitHub @saviomartin もフォローしてください。素晴らしいプロジェクトを見逃さないで！💯
フィードバックは大歓迎です！🙌 素晴らしい一日を！
ウェブ開発者向けの10種類のキラーなJavaScriptスニペット 🔥
生産性をアップさせるためのワンラインJavaScriptスニペット。98.8%の人が全部知らないよ！
スレッド 🧵👇️
2021年9月20日 再七時六分
🌎 繋がりましょう
- Github
- Instagram
こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/saviomartin/20-killer-javascript-one-liners-94f
