了解 JavaScript 中的 Ticker 函數(shù)

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

本文討論了 JavaScript 中的股票程式碼功能如何運(yùn)作，這是我在 Codewars 的挑戰(zhàn)中遇到的。這個(gè)函數(shù)允許我們使用 JavaScript 來建立滾動(dòng)文字效果。

什麼是股票代號(hào)？

Ticker 是水平移動(dòng)的文本，常用於各種應(yīng)用程式中顯示不斷更新的信息，例如最新新聞、公告或廣告。這些效果可以在數(shù)位螢?zāi)换螂娮庸姘迳险业?，通?？梢允褂?HTML、CSS 和 JavaScript 來實(shí)現(xiàn)。

我們將在下面討論的 JavaScript 中的股票程式碼功能，提供了在 Web 應(yīng)用程式中建立動(dòng)態(tài)運(yùn)行文字效果的解決方案。

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

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
}

股票行情功能說明

函數(shù)有三個(gè)參數(shù)：

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

以下是該函數(shù)中每個(gè)步驟的技術(shù)解釋：

---

1.建立空間來換行文字

const display = ' '.repeat(width);

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

範(fàn)例：
如果寬度為 5，則顯示變數(shù)將包含由 5 個(gè)空格組成的字串 ' '。

2.在文字周圍加入空格

text = display + text + display;

第二步，我們?cè)谖淖郑╰ext）的前面和後面加上顯示字串（空格）。這確保了文字兩側(cè)都有可用空間，為文字移動(dòng)（滾動(dòng)）提供了一個(gè)不被切斷的地方。

範(fàn)例：
假設(shè)給定的文字是“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
}

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

3.計(jì)算文字移動(dòng)位置

const display = ' '.repeat(width);

第三步，我們使用模運(yùn)算子（%）來確?？潭戎翟谟行Ч?fàn)圍內(nèi)，並且不超過已被空格包裹的文字長(zhǎng)度。

text.length - width 值給出了換行文字的總長(zhǎng)度（包括空格）減去我們要顯示的顯示寬度（寬度）。這確保了勾號(hào)指定的文字移位不會(huì)超過可顯示的文字長(zhǎng)度。

範(fàn)例：
如果添加空格後的文字長(zhǎng)度為15（例如'Hello'），寬度為5，那麼text.length - width就變成10。也就是說，我們只需要保證刻度在範(fàn)圍內(nèi)即可0 到 9。這可以確保文字的移動(dòng)始終有效，不會(huì)遺失任何部分。

4.檢索要顯示的子字串

text = display + text + display;

在最後一步中，我們使用 slice() 方法取得文字字串的一部分，從刻度位置開始到刻度寬度位置。 slice() 函數(shù)傳回字串中與該位置對(duì)應(yīng)的部分。

範(fàn)例：
例如，如果tick = 3且width = 5，則代碼slice(3, 8)將從字串「Hello」產(chǎn)生子字串「Hello」。

透過這種方式，我們顯示了長(zhǎng)度與寬度相符的部分文字。每次使用不同的刻度值呼叫此函數(shù)時(shí)，顯示的文字都會(huì)移動(dòng)，從而創(chuàng)建移動(dòng)或滾動(dòng)效果。

---

使用股票代碼功能的範(fàn)例

讓我們來看看在程式碼中使用此函數(shù)的範(fàn)例：

'     Hello     '

發(fā)生的過程是：

1. 顯示 = ' '（5 個(gè)空格）。
2. 修改後的文字：「Hello World」。
3. 刻度值 = 3，換行後文字的長(zhǎng)度為 18。當(dāng)寬度 = 5 時(shí)，我們知道刻度的範(fàn)圍可以從 0 到 13。
4. slice(3, 8) 函數(shù)將傳回子字串 'Hello'。

如果我們?cè)谙麓魏艚袝r(shí)增加刻度值，文字將進(jìn)一步移動(dòng)，顯示的文字部分也會(huì)改變。

文字如何移動(dòng)？

建立移動(dòng)效果是因?yàn)槊看挝覀兒艚衪icker函數(shù)時(shí)，tick值都會(huì)改變。隨著刻度值的增加，顯示的文字部分也會(huì)改變。這會(huì)產(chǎn)生移動(dòng)效果，因?yàn)榭潭染€會(huì)動(dòng)態(tài)滾動(dòng)文字。

為了進(jìn)一步測(cè)試這種效果，我們可以透過定期增加刻度值來循環(huán)呼叫ticker函數(shù)，例如使用setInterval()每隔幾秒鐘更新一次顯示。

---

如果您有興趣嘗試類似的挑戰(zhàn)，我透過 Codewars 發(fā)現(xiàn)了這個(gè)功能，這是提高您的 JavaScript 程式設(shè)計(jì)技能的有趣練習(xí)。

祝你好運(yùn)，我希望這篇文章有助於理解 JavaScript 中的股票行情效果如何運(yùn)作！

以上是了解 JavaScript 中的 Ticker 函數(shù)：它是如何運(yùn)作的以及詳細(xì)解釋的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！