?前言

我們在打開百度或者知乎等網站查看源代碼時，在控制臺往往會看到如下圖所示的信息：

通過這種方式來幫助公司做招聘，是不是很有創意呢？一方面可以體現出這些公司對人才的渴望，另一方面也可以讓開發者們直接接觸招聘信息，更加高效的找到對公司感興趣的求職者。

接下來就讓來看看這些是如何實現的吧。

1. 基本的文字編排信息輸出

console.log作為javascript的全局方法之一，也支持輸出帶有格式和樣式的字符，比如我們使用/n進行換行，使用css樣式為指定文本編寫樣式，如下：

if (window.console) {
    console.log('想和我們共同打造世界最大中文互動問答平臺嗎？\n想讓自己的成就在億萬用戶面前展現嗎？想讓世界看得你的光芒嗎？\n加入我們，在這里不僅是工作，投入你的時間和熱情，滴滴汗水終會匯聚成不平凡的成果。\n期待你的加盟。');
    console.log("公司誠聘前端工程師，%c簡歷投遞地址http://www.badu.toudi.com", "color:blue;font-weight:bold;");
    console.log("請在郵件中注明%c來自:console", "color:red;font-weight:bold;");
}

以上%c后面的本將用console.log的第二個參數制定的樣式來輸出，效果如下：

我們可以利用這些方式實現更加有創意的控制臺信息，包括公司的宣傳畫，招聘貼等。

2. 在控制臺打印字符畫

正如上文所展示的控制臺知乎招聘貼，我們也可以為自己的網站定制招聘宣傳貼。關于字符畫的編寫，我們可以一行行在控制臺敲，當然這種方式不建議采用，我們可以使用網站http://patorjk.com/來生成自己的字符畫，然后在通過代碼包裝輸出到控制臺。

以上就是該網站的界面，我們只需要輸入想要轉化成字符畫的英文字符，就可以生成不同樣式風格的字符畫。以下是HIRE的不同風格的字符畫：

當然這只是網站生成的一部分，該網站一共為HIRE生成了314中不同風格的字符畫，是不是很強大呢？當然我們單純只復制這些字符是遠遠不夠的，我們還需要用函數包轉一下，才能原樣輸出到控制臺。具體實現代碼如下：

<script>
    Function.prototype.makeMulti = function () {
        let l = new String(this)
        l = l.substring(l.indexOf("/*") + 3, l.lastIndexOf("*/"))
        return l
    }

    let string = function () {
      /* 你復制的字符圖案 */
    }
    console.log(string.makeMulti());
    console.log(/* 其他信息 */);
</script>

我們將上面從網站生成的字符畫復制到string函數中，執行代碼后效果如下：

當然我們可以繼續擴展該函數，支持輸出彩色字符畫等功能，大家感興趣可以探索一下。