Uncaught RangeError: Invalid string length in JavaScript

Question

我有一个JavaScript函数：

      function addcontent(ele, text, lines, separate_lines){

        if(separate_lines){
        for(i=0; i<lines; i++){
          text=text+"\n"+text+"\n";
        }
      }

        else if(!separate_lines){
        for(e=0; e<lines; e++){
          text=text+text;
        }
      }

        ele.append(text);

      }

当我用它来单击 HTML 按钮时，例如：

      <button onclick="addcontent(document.body, 'A', 100, true)">
        Add content.
      </button>

当我单击按钮时，Chrome 控制台出现此错误：

Uncaught RangeError: Invalid string length at addcontent at HTMLButtonElement.onclick

我不知道我哪里错了。

Answer 1

旧的Wheat and chessboard problem，字符串太长了。

你将字符串加倍 100 次，即 2^100...

说 lines = 10

效果很好

Answer 2

问题是在每次迭代中您将 text 添加两次，但您又将结果分配给 text。

迭代 1：A + A = AA（但你分配给 text）所以
迭代 2：AA + AA = AAAA
迭代 3：AAAA + AAAA = AAAAAAAA
迭代 4：AAAAAAAA + AAAAAAAA = AAAAAAAAAAAAAAAAAA
等等

所以它是指数级的。您基本上是在插入 2^行文本。你可以猜到这会创建一个“相当”大的字符串并且无法处理它。

为生成的文本使用不同的变量。

function addcontent(ele, text, lines, separate_lines) {
  let finalText = text;
  if (separate_lines) {
    for (let i = 0; i < lines; i++) {
      finalText = finalText + "\n" + text;
    }
  } else {
    for (let e = 0; e < lines; e++) {
      finalText = finalText + text;
    }
  }

  ele.append(finalText);
}

<button onclick="addcontent(document.body, 'A', 100, true)">
        Add content.
</button>

Answer 3

这个问题可以解决，如果你能做到：

text = (text + "\n").repeat(lines * 2);

function addcontent(ele, text, lines, separate_lines) {
  if (separate_lines) {
    text = (text + "\n").repeat(lines * 2);
  } else if (!separate_lines) {
    for (e = 0; e < lines; e++) {
      text = text + text;
    }
  }
  ele.append(text);
}

<button onclick="addcontent(document.body, 'A', 100, true)">
    Add content.
  </button>

如果你想在 A

之后添加新行

function addcontent(ele, text, lines, separate_lines) {
  if (separate_lines) {
    text = `${text}<br>`.repeat(lines * 2);
  } else if (!separate_lines) {
    for (e = 0; e < lines; e++) {
      text = text + text;
    }
  }
  ele.innerHTML = text;
}

<button onclick="addcontent(document.body, 'A', 100, true)">
    Add content.
  </button>

Uncaught RangeError: Invalid string length in JavaScript

Uncaught RangeError: Invalid string length in JavaScript

javascript

html

function

for-loop

string-length