如何在外部JavaScript文件中实现可HTML调用的字符串左移函数？

算力阿峰

2026-8-10

实现字符串左移一位的JavaScript函数

核心函数实现

用JS字符串的slice()方法就能简单搞定，直接看代码：

// 保存为外部JS文件，比如stringShift.js
function shiftLeft(key) {
  // 空字符串或单个字符直接返回原内容
  if (!key || key.length === 1) return key;
  // 截取从第2个字符到末尾的部分，再拼接上第一个字符
  return key.slice(1) + key[0];
}

关于你提到的负索引思路

你的思路方向是对的——JS里确实支持用负索引访问字符串末尾的字符，但左移一位的需求其实不需要手动修改索引，直接通过字符串截取就能实现。比如key.slice(1)会取出从索引1到末尾的所有字符（比如"ABCDE"里的"BCDE"），再拼接上key[0]（也就是第一个字符"A"），就能得到"BCDEA"，完全符合你的要求。

如果硬要结合负索引的思路，其实可以写成这样（效果和上面一致，但不如前者直观）：

function shiftLeft(key) {
  if (!key || key.length === 1) return key;
  // slice(-1)是取最后一个字符？不对，这里我们要的是第一个字符移到最后，所以应该是slice(1) + slice(0,1)，哦不对，刚才的写法有误，正确的负索引用法其实在这里没必要，还是直接用key[0]更清晰
  return key.slice(1) + key.slice(0, 1);
}

在HTML中调用这个函数

在HTML里引入外部JS文件，再通过用户输入触发函数：

<input type="text" id="userInput" placeholder="输入要移位的字符串">
<button onclick="doShift()">左移一位</button>
<p id="outputResult"></p>

<!-- 引入外部JS文件 -->
<script src="stringShift.js"></script>
<script>
function doShift() {
  // 获取用户输入的key变量
  const key = document.getElementById('userInput').value;
  // 调用移位函数
  const result = shiftLeft(key);
  // 显示结果
  document.getElementById('outputResult').textContent = `移位后：${result}`;
}
</script>