JAvascriptのreplace+正規実装ES 6の文字列テンプレート

5320 ワード

HTMLにJSONデータを埋め込むには、綴り文字列として使用します.最初はコード量が少なく、しばらくは許容できます.しかし、ページ構造が複雑になると、その弱点は耐えられなくなります.
  • は一貫して書かれていません.変数を書くたびに切断し、+とを挿入します.エラーが発生しやすいです.
  • は再利用できません.HTMLセグメントはいずれも離散化されたデータであり,その中で重複する部分を抽出することは困難である.
  • はラベルをうまく利用できません.これはHTML 5に新たに追加されたラベルで、標準ではHTMLテンプレートをラベルに入れ、コードをより簡潔にすることを強くお勧めします.

  • replace+正規実装
    プロジェクトの最初に使用したデータの接続
         function formatString() {
            if (arguments.length === 0)
                return null;
            var str = arguments[0];
            for (var i = 1; i < arguments.length; i++) {
                var re = new RegExp('\\{' + (i - 1) + '\\}', 'gm');
                str = str.replace(re, arguments[i]);
            }
            return str;
        },

    最初のパラメータは、レンダリングが必要なデータテンプレート、その他のパラメータはデータです.
    formatString('{0},My name is {1}', 'everyMan', '   ')

    この後期メンテナンスは面倒で、順序を変更すると~~関数が大きなパラメータを受信する必要があるのと同じように、できるだけオブジェクトの形式に書きます.
    var myObject = maker(f,l,m,c,s);//     
    
    var myObject = maker({//    
         first : f,
         last: l,
         state:s,
         city:c
    });

    ネットで検索して1つの例を見て、ES 6の文字列のテンプレートの形式を実現することができて、ブログは高校生が書いたので、スタンプのリンク
    function render(template, context) {
    
        //         {   }       ,               
        var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g;
    
        return template.replace(tokenReg, function (word, slash1, token, slash2) {
            //      \{ \}      
            if (slash1 || slash2) {  
                return word.replace('\\', '');
            }
    
            //    token ,            
            var variables = token.replace(/\s/g, '').split('.'); 
            var currentObject = context;
            var i, length, variable;
    
            for (i = 0, length = variables.length; i < length; ++i) {
                variable = variables[i];
                currentObject = currentObject[variable];
                //             ,         。
                if (currentObject === undefined || currentObject === null) return '';
            }
            return currentObject;
        })
    }
    
    String.prototype.render = function (context) {
        return render(this, context);
    };
    
    "{greeting}! My name is { author.name }.".render({
        greeting: "Hi",
        author: {
            name: "hsfzxjy"
        }
    });
    // Hi! My name is hsfzxjy.

    拡張:ES 6文字列テンプレートAPI
    ES 6はテンプレート文字列(template strings)と呼ばれる新しい文字列字面量構文を導入した.通常の文字列の引用符'または'の代わりに逆引用符'または'を使用する以外は、通常の文字列と変わらないように見えます.
    var a = 'kenny'
    `my name is ${a}` //"my name is kenny"

    bableでES 5にコンパイルできます.