Question

未捕获的 RangeError：JavaScript 中的字符串长度无效

2021-11-20

9529

javascript html function for-loop string-length

我有一个 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 按钮的 onclick 时，例如：

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

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

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

我不知道我错在哪里。

Answer 1

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

迭代 1：A + A = AA（ 但您分配给 text ）因此
迭代 2：AA + AA = AAAA
迭代 3：AAAA + AAAA = AAAAAAAA
迭代 4：AAAAAAAA + AAAAAAAA = AAAAAAAAAAAAAAAA
等等

因此它是指数的。您基本上是在插入 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 2

这是古老的小麦和棋盘问题，字符串实在是太长了。

你将字符串翻倍 100 次，也就是 2^100...

如果 lines = 10，它就可以正常工作

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>