20個のJavaScriptワンラインコードを共有する

20個のJavaScriptワンラインコードを共有する

1. ブラウザのクッキーの値を取得する

document.cookieアクセサーを使用してcookieの値を取得します。

const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();

クッキー('_ga');
// 結果: "GA1.2.1929736587.1601974046"


2. RGBを16進数に変換する

定数 rgbToHex = (r, g, b) =>
  "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

rgbToHex(0, 51, 255); 
// 結果: #0033ff

3. クリップボードにコピー

navigator.clipboard.writeTextを使用すると、テキストを簡単にクリップボードにコピーできます。

const copyToClipboard = (テキスト) => navigator.clipboard.writeText(テキスト);

クリップボードにコピーします("Hello World");


4. 日付が有効かどうかを確認する

指定された日付が有効かどうかを確認するには、次のコード スニペットを使用します。

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());

isDateValid("1995年12月17日 03:24:00");
// 結果: true


5. 年の何日目か調べる

指定された日付を検索します。

const dayOfYear = (日付) =>
  Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

dayOfYear(新しい日付());
// 結果: 272

6. 大文字の文字列

Javascriptには大文字化機能が組み込まれていませんが、次のコードを使用して大文字化を実現できます。

const 大文字化 = str => str.charAt(0).toUpperCase() + str.slice(1)

capitalize("続きはフォローしてください")
// 結果: 詳細はフォローしてください


7. 2つの日付の間の日数を求める

指定された 2 つの日付間の日数を見つけるには、次のコード スニペットを使用します。

定数 dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)

dayDif(新しい日付("2020-10-21")、新しい日付("2021-10-22"))
// 結果: 366


8. すべてのクッキーを消去する

document.cookieを使用してcookieにアクセスし、それをクリアすることで、Web ページに保存されているすべてのcookieを簡単にクリアできます。

const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));


9. ランダムな16進数を生成する

Math.randompadEndプロパティを使用して、ランダムな 16 進数の色を生成できます。

const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;

console.log(ランダム16進数());
// 結果: #92b008


10. 配列から重複を削除する

JavaScriptSetを使用すると、重複を簡単に削除できます。これは命の恩人です。

const removeDuplicates = (arr) => [...new Set(arr)];

console.log(重複を削除([1, 2, 3, 3, 4, 4, 5, 5, 6]));
// 結果: [ 1, 2, 3, 4, 5, 6 ]


11. URLからクエリパラメータを取得する

window.locationまたは元のURLgoole.com?search=easy&page=3を渡すことで、 url easy からクエリ パラメータを取得できます。

const getParameters = (URL) => {
  URL = JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}');
  JSON.stringify(URL) を返します。
};


12. 日付から時間を出力する

指定された日付からの時間をhour::minutes::secondsの形式で出力できます。

const timeFromDate = date => date.toTimeString().slice(0, 8);

コンソールにログ出力します。 
// 結果: "17:30:00"


13. 数字が偶数か奇数かを調べる

const isEven = num => num % 2 === 0;

コンソールログ(isEven(2)); 
// 結果: True


14. 数値の平均を求める

複数の数値の平均を求めるには、 reduceメソッドを使用します。

const average = (...args) => args.reduce((a, b) => a + b) / args.length;

平均(1, 2, 3, 4);
// 結果: 2.5


15. 上へスクロール

window.scrollTo(0, 0)メソッドを使用すると、自動的に上部までスクロールできます。 x と y の両方を 0 に設定します。

const goToTop = () => window.scrollTo(0, 0);

先頭へ移動します。


16. 文字列を反転する

splitreversejoinメソッドを使用して、文字列を簡単に反転できます。

const 逆 = str => str.split('').reverse().join('');

逆('hello world');     
// 結果: 'dlrow olleh'

17. 配列が空かどうか確認する

たった 1 行のコードで、配列が空かどうかを確認し、 trueまたはfalseを返すことができます。

const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;

空ではありません([1, 2, 3]);
// 結果: true


18. 選択したテキストを取得する

組み込みのgetSelectionプロパティを使用して、ユーザーが選択したテキストを取得します。

const getSelectedText = () => window.getSelection().toString();

選択されたテキストを取得します。


19. 配列をシャッフルする

sortrandomメソッドを使用して配列をシャッフルするのは非常に簡単です。

const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());

console.log(shuffleArray([1, 2, 3, 4]));
// 結果: [ 1, 4, 3, 2 ]


20. ダークモードを検出する

次のコードを使用して、ユーザーのデバイスがダーク モードになっているかどうかを確認します。

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

console.log(isDarkMode) // 結果: True または False


要約:

20個のJavaScriptワンラインコードを分析したこの記事はこれで終わりです。JavaScriptワンラインコードに関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。皆様、今後とも123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません:
  • 18 個のキラー JavaScript ワンライナー
  • 開発でよく使われる JavaScript の 1 行コード 25 個 (要約)
  • 1行のテキストを上にスクロールする効果を実現する js の例コード
  • jsの1行メッセージスクロールコードでは、無数に追加できます

<<:  HTML 特殊文字エンコーディング CSS3 コンテンツに関する簡単な説明:「私は特別なシンボルです」

>>:  MySQL での order by の使用に関する詳細

推薦する

CSSで検索ボックスを非表示にする機能を実装します(アニメーション順方向と逆方向のシーケンス)

上部のメニュー バーに検索ボックスを配置するのは一般的なシナリオですが、検索機能がそれほど頻繁に使用...

MySQL インデックスの設計と最適化の方法

目次インデックスとは何ですか?左端のプレフィックス一致の原則key_lenの計算方法インデックスの最...

Alibaba Cloud に Docker をインストールする際の問題と解決策

質問Alibaba Cloud イメージを使用して Docker をインストールすると、次の図に示す...

MySQL データベースのマスター スレーブ分離のサンプル コード

導入MySQL データベースの読み取りと書き込みの分離を設定すると、データベースに対する書き込み操作...

Vue で echarts を使用してコンポーネントを視覚化する方法

echarts コンポーネントの公式ウェブサイト アドレス: https://echarts.apa...

Virtualbox に Centos7 仮想マシンをインストールする詳細なグラフィック チュートリアル

1. Centos7をダウンロードするダウンロードアドレス: https://mirrors.tun...

アコーディオンセカンダリメニューを実装するためのjQueryプラグイン

この記事では、jQueryプラグインを使用してアコーディオンセカンダリメニューを作成します。具体的な...

MySQL 8.0 のインデックス スキップ スキャン

序文MySQL 8.0.13 では、インデックス スキップ スキャン (インデックス ジャンプ スキ...

Vue+EChartsは、中国の地図の描画と省の自動回転と強調表示を実現します。

目次成果を達成する完全なコード + 詳細なコメントまとめ成果を達成する完全なコード + 詳細なコメン...

HTML 再利用テクニック

HTML の再利用は、あまり話題に上らない言葉です。今日は、この問題を次のようにまとめたいと思います...

impress.js プレゼンテーション層フレームワーク (デモツール) - 初めての体験

半年もブログを書いていなかったので、少し恥ずかしいです... 正月休みは、Dota をプレイしたり ...

MySQL の同時実行性の問題と解決策の分析

目次1. 背景2. テーブルロックによるクエリの遅延3. オンラインでテーブル構造を変更するとどのよ...

JS はデータ URL をどのように理解するのでしょうか?

目次概要データ URL の使用を開始するデータURL構文複数言語の文字列のBase64エンコードとデ...

Linux で特定のユーザーにフォルダーのすべてのコンテンツを許可するにはどうすればよいですか?

【問題分析】 chown コマンドを使用できます。ここで ch は change (変更) を表し...

動的および静的分離を実現する nginx のサンプルコード

1. nginxの動的と静的の分離の簡単な設定web1は静的サーバー、web2は動的サーバー、nod...