JavaScript循环中使用Emoji替换乘法表数字的实现咨询

• 首先确定要用来替换数值的Emoji，统一声明为常量方便后续修改调整。
• 数值转Emoji的逻辑直接用JS内置的String.repeat()方法即可实现，传入目标数值就能得到对应数量的Emoji拼接结果，如需每个Emoji之间有空格分隔，拆分字符串后用空格拼接即可。
• 新增输入合法性校验逻辑，避免用户输入非正整数、超出范围的数值导致输出异常。
• 原有代码用document.write会覆盖页面现有内容，更合理的做法是把生成的乘法表内容插入到页面指定的DOM容器中。

// 可自行替换为你想用的任意Emoji
const RENDER_EMOJI = '🍉';

function generate() {
  const inputEle = document.getElementById('value1');
  const inputVal = Number(inputEle.value);

  // 输入合法性校验，可根据需求调整数值范围
  if (!Number.isInteger(inputVal) || inputVal < 1 || inputVal > 100) {
    alert('请输入有效的正整数');
    return;
  }

  // 优先找页面上id为output的容器输出，没有就直接输出到body
  const outputBox = document.getElementById('output') || document.body;
  // 清空之前的输出结果
  outputBox.innerHTML = '';

  for (let i = 1; i <= 10; i++) {
    // 生成i个Emoji组成的字符串，用空格分隔
    const emojiContent = RENDER_EMOJI.repeat(i).split('').join(' ');
    const lineNode = document.createElement('p');
    lineNode.textContent = `${inputVal} x ${emojiContent} = ${inputVal * i}`;
    outputBox.appendChild(lineNode);
  }
}

如果你需要兼容不支持repeat方法的老旧浏览器，也可以手动写循环拼接Emoji字符串，逻辑如下：

function getEmojiStr(count, emoji) {
  let str = '';
  for (let j = 0; j < count; j++) {
    str += emoji + ' ';
  }
  return str.trim();
}

直接调用这个方法传入对应数值和Emoji即可拿到和之前一样的结果。

内容的提问来源于stack exchange，提问作者user16956594