ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript の console.log をカスタマイズする

JavaScript の console.log をカスタマイズする

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-09-23 06:19:07814ブラウズ

Customize JavaScript

デフォルトの console.log() を拡張して、現在の日時を接頭辞として付ける方法を疑問に思ったことがあるなら:

// Store the default log method:
const _log = console.log;

// Override:
console.log = (...args) => {
    const prefix = `[${new Date().toLocaleString()}]`;
    if (typeof args[0] === "string") args[0] = `${prefix} ${args[0]}`
    else args.unshift(prefix);
    _log(...args);
};

// Examples:
console.log("Test"); // [Date Time] Test
console.log({a: "b"}); // [Date Time] {a: "b"}
console.log("Hello, %s!", "World"); // [Date Time] Hello, World!
console.log("Number: %i", 42); // [Date Time] Number: 42
console.log("%cStylized text", 'color: red'); // [Date Time] Stylized text

console.log を書くのは面倒なので、デフォルトの動作をオーバーライドする代わりに、console.log を内部的に使用する log() 関数を作成しましょう。

const log = (...args) => {
    const prefix = `[${new Date().toLocaleString()}]`;
    if (typeof args[0] === "string") args[0] = `${prefix} ${args[0]}`
    else args.unshift(prefix);
    console.log(...args);
};

// Examples:
log("Test"); // [Date Time] Test
log({a: "b"}); // [Date Time] {a: "b"}
log("Hello, %s!", "World"); // [Date Time] Hello, World!
log("Number: %i", 42); // [Date Time] Number: 42
log("%cStylized text", 'color: red'); // [Date Time] Stylized text

ロギングを楽しんでください。ブレークポイントを忘れないでください ;)

以上がJavaScript の console.log をカスタマイズするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。