了解 JavaScript 中的 Ticker 函數：它是如何運作的以及詳細解釋-js教程-PHP中文網

Memahami Function Ticker di JavaScript: Cara Kerja dan Penjelasan Detail

了解 JavaScript 中的 Ticker 函數

Ticker 運行文本，通常用於數位看板應用程式或作為促銷媒體。該文字可以以引人注目的方式顯示新聞、廣告或公告等資訊。運行文字通常使用 HTML 和 CSS 實現，無需 JavaScript 即可操作，儘管許多軟體也提供此功能以更好地調度和控制。

本文討論了 JavaScript 中的股票程式碼功能如何運作，這是我在 Codewars 的挑戰中遇到的。這個函數允許我們使用 JavaScript 來建立滾動文字效果。

什麼是股票代號？

Ticker 是水平移動的文本，常用於各種應用程式中顯示不斷更新的信息，例如最新新聞、公告或廣告。這些效果可以在數位螢幕或電子公告板上找到，通常可以使用 HTML、CSS 和 JavaScript 來實現。

我們將在下面討論的 JavaScript 中的股票程式碼功能，提供了在 Web 應用程式中建立動態運行文字效果的解決方案。

以下是我們將要討論的股票代碼功能代碼：

const ticker = (text, width, tick) => {
  const display = ' '.repeat(width);  // 1
  text = display + text + display;    // 2
  tick = tick % (text.length - width); // 3
  return text.slice(tick, tick + width); // 4
}

登入後複製

股票行情功能說明

函數有三個參數：

text：您要顯示的文字。
width：想要的顯示寬度，即一次顯示多少個字元。
tick：文字的移位位置，決定了函數呼叫時將顯示哪些文字。

以下是該函數中每個步驟的技術解釋：

1.建立空間來換行文字

const display = ' '.repeat(width);

登入後複製

第一步，我們使用repeat()方法建立一個空字串，其中包含與寬度一樣大的空格。 Repeat() 函數將重複指定字元（在本例中為空格）寬度指定的次數。

範例：
如果寬度為 5，則顯示變數將包含由 5 個空格組成的字串 ' '。

2.在文字周圍加入空格

text = display + text + display;

登入後複製

第二步，我們在文字（text）的前面和後面加上顯示字串（空格）。這確保了文字兩側都有可用空間，為文字移動（滾動）提供了一個不被切斷的地方。

範例：
假設給定的文字是“Hello”，寬度為 5。那麼在這一行之後，文本將是：

const ticker = (text, width, tick) => {
  const display = ' '.repeat(width);  // 1
  text = display + text + display;    // 2
  tick = tick % (text.length - width); // 3
  return text.slice(tick, tick + width); // 4
}

登入後複製

這樣，文字左右就有足夠的空白，以便更流暢的移動。