Javascriptと非常に長い文字列

Question

私は以下のコードで問題が発生しています：。

function showTableData() 
{ 
    var tableArray; 
    var x = 0; 
    var theHTML; 

    for (i = 0; i < 7032; i++) 
    { 
     if (x = 0) 
     { 
      theHTML = '<tr>' + 
       '<th scope="row" class="spec">' + partNum[i] + '</th>' + 
       '<td>' + Msrp[i] + '</td>' + 
       '<td>' + blah[i] + '</td>' + 
       '<td>' + blahs[i] + '</td>' + 
      '</tr>' + theHTML; 
      x++; 
     }else{ 
      theHTML = '<tr>' + 
       '<th scope="row" class="specalt">' + partNum[i] + '</th>' + 
       '<td class="alt">' + Msrp[i] + '</td>' + 
       '<td class="alt">' + blah[i] + '</td>' + 
       '<td class="alt">' + blahs[i] + '</td>' + 
      '</tr>' + theHTML; 
      x--; 
     } 
    } 
    theHTML = '<table id="mytable" cellspacing="0">' + 
    '<tr>' + 
     '<th scope="col" abbr="Configurations" class="nobg">Part Number</th>' + 
     '<th scope="col" abbr="Dual 1.8">Msrp Price</th>' + 
     '<th scope="col" abbr="Dual 2">blahs Price</th>' + 
    '<th scope="col" abbr="Dual 2.5">Low Price</th>' + 
    '</tr>' + theHTML + '</table>'; 

    $('#example').append(theHTML); 
} 
</script> 

<div id="example"> 
</div> 

問題$（ '＃の例では、'）（theHTML）を追加することであること。は実行されません（またはページに表示されます）。私はその文字列が長い間sooooooだと思う！配列には7,000以上のアイテムがあります。その理由があるのか​​、それとも何か他のものがあればわかりません。

助けがあれば助かります。ありがとう！

デビッド

Answer 1

、あなたは本当にアレイを使用して、ここでパフォーマンスを向上させる必要があります。文字列を連結する代わりにjoin（）メソッドを使用します。これにより、C＃またはJavaのStringBuilderと同様の効果が得られます。例えば

：JavaScript strings are immutableそう前者の例である2つの文字列が連結されるたびに作成された3番目の文字列があるので、文字列'my' + ' appended' + ' string'を付加する文字列を['my', ' joined', ' string'].join('')を接合よりも遅い理由

function showTableData() 
{ 
    var tableArray; 
    var theHTML = []; 
    theHTML.push('<table id="mytable" cellspacing="0">', 
    '<tr>', 
     '<th scope="col" abbr="Configurations" class="nobg">Part Number</th>', 
     '<th scope="col" abbr="Dual 1.8">Msrp Price</th>', 
     '<th scope="col" abbr="Dual 2">blahs Price</th>', 
    '<th scope="col" abbr="Dual 2.5">Low Price</th>', 
    '</tr>'); 

    for (var i = 0; i < 7032; i++) 
    { 
     if (i % 2 == 0) 
     { 
      theHTML.push('<tr>', 
       '<th scope="row" class="spec">', partNum[i], '</th>', 
       '<td>', Msrp[i], '</td>', 
       '<td>', blah[i], '</td>', 
       '<td>', blahs[i], '</td>', 
      '</tr>'); 
     } else { 
      theHTML.push('<tr>', 
       '<th scope="row" class="specalt">', partNum[i], '</th>', 
       '<td class="alt">', Msrp[i], '</td>', 
       '<td class="alt">', blah[i], '</td>', 
       '<td class="alt">', blahs[i], '</td>', 
      '</tr>'); 
     } 
    } 
    theHTML.push('</table>'); 

    $('#example').append(theHTML.join('')); 
} 
</script> 

<div id="example"> 
</div> 

理由は新しいエントリを配列に追加するのと比較して非常に高価な操作です。

同じ値段のArray.push（）とArray.join（）を使用して構築されたJavascript StringBuilder projectも参照してください。

IEでの10,000連結のこのプロジェクトでのパフォーマンスの改善は、1分以上から0.23秒に低下しました。

更新： forループ内の文字列連結を置き換えるために、Array.join（）への追加呼び出しが追加されました。これは、クライアントのレンダリング速度をさらに向上させるためです。 + StringBuilderへのより良いリンクを追加しました。

FURTHER UPDATE：ヘムロックによってを追加しまし提案：

1. グローバルforループ
2. でvar i = 0を定義することで、変数をスコープの使用を削除は、（のArray.pushの複数のパラメータを使用して、一度に複数の文字列をプッシュ）。

Answer 2

このライン：

if (x = 0) 

はそれが

if (x == 0) 

は、スクリプトの残りの部分が実行されることができない原因となる、ここでエラーの可能性がありますすべきではありません。私が見た

Answer 3

つのエラーがif (x = 0)が、私のために働くように見えるということ以外に、if (x == 0)でなければならないことだった。本当にif (i % 2 === 0)でなければなりませんif (x = 0)は別にhttp://jsfiddle.net/9vvJ6/

Answer 4

ここですでにjQueryを使用している場合は、ここでjQuery templatesと考えると、コードをかなり整理して簡単にすることができます。パフォーマンスのトレードオフがあるかもしれません（ただし、文字列補間はJavaScriptの文字列連結よりも速いので、これは高速かもしれません）。しかし、パフォーマンスが低下するかどうかは、はるかに洗練されたソリューションです。テンプレート全体を1つの場所に保存することができます（おそらく、外部ファイル、またはドキュメントのDOMに隠れている部分がありますが、これを使ってベストプラクティスを教えてくれません）。そしてjQueryテンプレートを使用して文字列置換を行います。 jQueryベースのテンプレートフレームワークは複数ありますが、リンク先はjQueryの公式な部分になりつつあります。

Answer 5

問題は.append jquery関数です。長い文字列には.htmlや.append関数を使用できません。代わりに、あなたはそれだけであれば（X == 0） `分からない場合は、この

document.getElementById('example').innerHTML=theHTML.join('');