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 の使用に関する詳細

推薦する

Vueはプラグインを使用して画像を比例してカットします

この記事では、プラグインを使用して画像の比例カットを実現するVueの具体的なコードを参考までに共有し...

Vue はウェブページの言語切り替えの国際化を実装します

1. 基本的な手順1: yarn add vue-i18nをインストールするこのパスに新しい .js...

Vueのライブ放送機能の詳しい説明

最近、会社でたまたま生放送をしていたのですが、今日は私が遭遇した落とし穴を記録します。会社のサーバー...

1 つの記事で Node.js の非同期プログラミングを学ぶ

目次 はじめに 同期 非同期とブロッキング JavaScript のノンブロッキング コールバック ...

Tomcatの各ポートの機能の詳細な説明

tomcat 設定ファイルから、tomcat の起動時にデフォルトで 8080 (8443)、800...

HTML の POST リクエストにおける a タグの 2 つの使用法の分析

HTML POST リクエストで a タグを使用する 2 つの例を次に示します。 1. ajaxを使...

MySQL binlog_ignore_dbパラメータの具体的な使用法

序文:前の記事を読んだ後、binlog はデータベースで実行されたすべての DDL および DML ...

MySQLでSQL文がどのように実行されるかの詳細な説明

概要最近MySQL関連の知識を勉強し始めました。学んだ知識ポイントと自分の理解を元に整理して共有しま...

MySQL で重複を削除するには、distinct または group by を使用する必要がありますか?

序文group by と distinctive のパフォーマンス比較について: インターネット上の...

Docker Compose を使用して Confluence を構築するチュートリアル

この記事は「Attribution 4.0 International (CC BY 4.0)」ライ...

echartsマップカルーセルハイライトを解決するための記事

目次序文やることリストやるだけ地図を準備するインスタンスをバックアップ用に保存するタイマーカルーセル...

Windows で MySQL 5.7.17 をインストールし、エンコードを utf8 に設定する方法

ダウンロードMySQL 公式ダウンロード、Windows (x86、64 ビット)、ZIP アーカイ...

Baidu サイト検索が https をサポートしていない問題の解決策 (テスト済み)

最近、携帯電話で https が有効になりました。緑色のロックを取得するには、次の問題を解決する必要...

MySQL コマンドライン操作中のエンコードの問題の詳細な説明

1. MySQLデータベースのエンコーディングを確認する mysql -u ユーザー名 -p パスワ...