如何使用JavaScript將字串顯示為下標?


在本教程中,我們將學習如何使用JavaScript將顯示的字串更改為下標。下標字串是指一個以小寫字母顯示在另一個字串之後並在其下方懸掛的字串。例如,在Astart中,“start”就是下標字串,它以小寫字母顯示在A之後並在其下方。

下標在許多領域都有應用,例如數學、化學等。它在表示化學名稱方面非常有用。例如,H2、N2、O2等。我們也可以在數學中使用它來顯示符號,例如X2、A2等。

在這裡,我們將學習如何使用HTML和JavaScript來表示下標字串。

僅使用HTML顯示下標字串

在我們學習如何使用JavaScript將字串顯示為下標之前,我們應該學習如何使用原始HTML渲染下標字串。HTML包含<sub>標籤。程式設計師在<sub>標籤內放置的任何字串都將顯示為下標字串。

語法

我們可以按照以下語法使用<sub>標籤。

<p> A <sub> start </sub> </p> // output is Astart

示例

在下面的示例中,我們使用了HTML <sub> 標籤來渲染一些數學和化學公式。此示例僅用於演示 <sub> 標籤。

<html> <head> </head> <body> <h2> displayed string as a subscript using JavaScript. </h2> <h4> Various examples of subscript string using Raw HTML. </h4> <p> A <sub> start </sub> </p> <p> X<sub>2 </sub> </p> <p> CO<sub>2 </sub> </p> <p> C<sub>12 </sub> H<sub>22 </sub> O<sub>11 </sub> </p> </body> </html>

在輸出中,使用者可以看到我們是如何使用<sub>標籤編寫化學公式的。

使用HTML和JavaScript顯示下標字串

我們在上一節學習瞭如何僅使用HTML將字串顯示為下標。在本節中,我們將使用JavaScript的string.sub()方法。string.sub()方法也返回原始HTML,我們可以將其附加到HTML的主體。

語法

let string = “24”;
let result = “x” + string.sub(); // convert string variable to subscript.
let result = “x” + “24”.sub(); // use direct string with sub() method 

返回值

string.sub() 方法返回 <sub> HTML 標籤內的字串。

<sub> string <sub>

示例

在下面的示例中,我們使用了JavaScript的sub()方法將字串顯示為下標。我們使用sub()方法建立了各種化學公式,並在輸出中渲染它們。

<html> <head> </head> <body> <h2> Displayed string as a subscript using JavaScript. </h2> <div id = "subscript"> </div> <div id = "deprecated"> <br>The String sub() method is deprecated. So use sub tag. <br></div> </body> <script> var subscript = document.getElementById("subscript"); let string = "3"; let checmical_formula = "HCO" + string.sub(); var str = "<sub>Demo Text</sub>"; subscript.innerHTML = checmical_formula + "<br/>"; checmical_formula = "Cr" + "2".sub() + "O" + "7".sub()+ "<br/>"; subscript.innerHTML += checmical_formula; deprecated.innerHTML += "<br>This is subscript" + str; </script> </html>

注意 - string.sub() 方法已棄用,因此請使用sub標籤。

我們已經學習瞭如何使用JavaScript將字串渲染為下標。當我們需要使用HTML和JavaScript或僅使用HTML將數學符號、問題、化學公式等寫入網頁時,這非常有用。

更新於:2022年8月2日

3K+ 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.