如何使用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+ 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告