在JavaScript文件里嵌入大量字符串常量是經常遇到的事。有時為了省事,就把一些界面的HTML和CSS直接寫在JS文件里。數量少還好,多的話就密密麻麻的一坨文字,講究美觀的文藝青年們,會用大量的字符連接符號甚至加上縮進,強制換成好幾行。例如:
var html =
'<div>' +
'<p>Hello</p>' +
'<p>World'</p>' +
'</div>';
這還好,要是字符串里有不少雙引號單引號,那就更麻煩了,各種轉義字符看的眼花繚亂。
其實有個不怎么起眼的小技巧,就能解決這個問題。大家總認為字符串必須在"..."或'...'里面,這點沒錯。但還有一個地方的字符串也能當非代碼語義保存下來,那就是一個function的toString,把整個函數的代碼當字符串輸出——其中的注釋部分當然也是保留的!
所以我們寫個空函數,里面就一個/**/注釋,其中就是我們想要的常量內容。toString后加一個正則就可以提取我們想要的!
馬上試試:
var RES_CODE = _TEXT(function(){/* #include <iostream> int main() { std::cout << "Hello world" << std::endl; return 0; } */}); var RES_POEM = _TEXT(function(){/* 更吹落,星如雨。 寶馬雕車香滿路。 鳳簫聲動,玉壺光轉,一夜魚龍舞。 蛾兒雪柳黃金縷, 笑語盈盈暗香去。 眾里尋他千百度, 驀然回首,那人卻在燈火闌珊處。 */}); var RES_XML = _TEXT(function(){/* <projectDescription> <name>Hello</name> <comment></comment> <projects> </projects> <buildSpec> <buildCommand> <name>com.adobe.flexbuilder.project.flexbuilder</name> <arguments> </arguments> </buildCommand> <buildCommand> <name>com.adobe.flexbuilder.project.apollobuilder</name> <arguments> </arguments> </buildCommand> </buildSpec> </projectDescription> */}); function _TEXT(wrap) { return wrap.toString().match(/\/\*\s([\s\S]*)\s\*\//)[1]; } alert(RES_CODE); alert(RES_POEM); alert(RES_XML);
OK!就是Chrome里把注釋每行前面的Tab去掉了,如果僅僅是放代碼的話問題也不大~ 當然有個前提是字符里不能出現*/
嘗試下看看: http://www.etherdream.com/funnyscript/js_multiline_const_string.html
值得注意的是,壓縮代碼的時會過濾注釋,需要手動排除一部分。
