如何用JavaScript实现多股票代码批量查询并表格展示价格

嗨，我来帮你把单个股票查询的应用升级成支持多代码批量查询的版本！咱们一步步来改，核心要解决三个问题：解析逗号分隔的输入、批量获取股票数据、用表格渲染结果。

第一步：修改输入处理逻辑 #

首先，你需要把用户输入的逗号分隔字符串转换成干净的股票代码数组——要去掉空格、过滤空值，还要避免重复代码（防止无效的重复请求）。写个工具函数就能搞定：

function parseTickers(input) {
  return input.split(',')
    .map(ticker => ticker.trim()) // 去掉代码前后的空格
    .filter(ticker => ticker.length > 0) // 过滤空字符串
    .filter((ticker, index, self) => self.indexOf(ticker) === index); // 去重
}

第二步：批量请求股票数据 #

原来的单个请求改成批量并行请求，用Promise.all来提高效率。这里假设你用的是常见的股票API（比如Alpha Vantage类的接口，你可以替换成自己实际使用的API地址和返回结构）：

async function fetchMultipleStockPrices(tickers) {
  const apiKey = '你的API密钥'; // 替换成你实际的API密钥
  const promises = tickers.map(async ticker => {
    try {
      const response = await fetch(`https://api.example.com/query?function=GLOBAL_QUOTE&symbol=${ticker}&apikey=${apiKey}`);
      const data = await response.json();
      // 适配API返回的结构，这里示例用Global Quote格式
      const quote = data['Global Quote'];
      return {
        symbol: quote['01. symbol'],
        price: `$${quote['05. price']}`,
        change: quote['09. change'],
        changePercent: quote['10. change percent']
      };
    } catch (error) {
      // 请求失败时返回友好提示
      return {
        symbol: ticker,
        price: '获取失败',
        change: '-',
        changePercent: '-'
      };
    }
  });
  return await Promise.all(promises);
}

第三步：渲染表格结果 #

把批量获取的数据转换成HTML表格，替换原来的单个结果展示。写个渲染函数：

function renderStockTable(stocks) {
  const container = document.getElementById('result-container');
  // 清空之前的结果
  container.innerHTML = '';

  if (stocks.length === 0) {
    container.innerHTML = '<p>请输入有效的股票代码</p>';
    return;
  }

  // 创建表格元素
  const table = document.createElement('table');
  table.classList.add('stock-table');

  // 构建表头
  const thead = document.createElement('thead');
  const headerRow = document.createElement('tr');
  ['股票代码', '当前价格', '涨跌额', '涨跌幅'].forEach(text => {
    const th = document.createElement('th');
    th.textContent = text;
    headerRow.appendChild(th);
  });
  thead.appendChild(headerRow);
  table.appendChild(thead);

  // 构建表体
  const tbody = document.createElement('tbody');
  stocks.forEach(stock => {
    const row = document.createElement('tr');
    // 股票代码单元格
    const symbolCell = document.createElement('td');
    symbolCell.textContent = stock.symbol;
    row.appendChild(symbolCell);
    // 价格单元格
    const priceCell = document.createElement('td');
    priceCell.textContent = stock.price;
    row.appendChild(priceCell);
    // 涨跌额单元格（根据涨跌设置颜色）
    const changeCell = document.createElement('td');
    changeCell.textContent = stock.change;
    if (stock.change && stock.change.startsWith('-')) {
      changeCell.style.color = '#dc3545';
    } else if (stock.change && !stock.change.startsWith('-')) {
      changeCell.style.color = '#28a745';
    }
    row.appendChild(changeCell);
    // 涨跌幅单元格
    const percentCell = document.createElement('td');
    percentCell.textContent = stock.changePercent;
    if (stock.changePercent && stock.changePercent.startsWith('-')) {
      percentCell.style.color = '#dc3545';
    } else if (stock.changePercent && !stock.changePercent.startsWith('-')) {
      percentCell.style.color = '#28a745';
    }
    row.appendChild(percentCell);

    tbody.appendChild(row);
  });
  table.appendChild(tbody);

  container.appendChild(table);
}

第四步：整合到原应用中 #

修改你的查询按钮点击事件，把上面的函数串起来：

// 假设你的输入框id是ticker-input，按钮id是search-btn
document.getElementById('search-btn').addEventListener('click', async () => {
  const input = document.getElementById('ticker-input').value;
  const tickers = parseTickers(input);
  
  if (tickers.length === 0) {
    alert('请输入逗号分隔的股票代码，比如 AAPL, MSFT, GOOGL');
    return;
  }

  // 显示加载状态
  const container = document.getElementById('result-container');
  container.innerHTML = '<p>正在查询数据...</p>';

  // 获取数据并渲染表格
  const stocks = await fetchMultipleStockPrices(tickers);
  renderStockTable(stocks);
});

额外优化建议 #

• 给表格加一点基础样式，让它更美观：

.stock-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
.stock-table th, .stock-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}
.stock-table th {
  background-color: #f8f9fa;
  font-weight: 600;
}

• 可以在输入时做实时格式化，比如自动去除多余空格；
• 如果API有调用频率限制，可将并行请求改成串行请求（加入延迟）避免触发限制。

这样修改后，你的应用就能支持用户输入类似AAPL, MSFT, GOOGL这样的逗号分隔代码，然后以清晰的表格展示每只股票的价格和涨跌信息啦！

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