如何使用 JavaScript 更改显示为下标的字符串?

front end technologyjavascriptweb development

在本教程中,我们将学习使用 JavaScript 更改显示为下标的字符串。下标字符串的含义是紧跟在字符串后面并悬挂在下方的小写字母字符串。例如,在 Astart 中,"start" 是紧跟在 A 后面并悬挂在下方的小写字母中显示的下标字符串。

子字符串用于数学、化学等许多领域。它对于表示化学名称很有用。例如,H2、N2、O2 等。此外,我们可以在数学中使用它来显示符号,例如 X2、A2 等。

在这里,我们将学习使用 HTML 和 JavaScript 将字符串表示为下标。

仅使用 HTML 将字符串显示为下标

在使用 JavaScript 将字符串显示为下标之前,我们应该学习如何使用原始 HTML 呈现下标字符串。HTML 包含 <sub> 标签。无论程序员在 <sub> 中放入什么字符串,它都会显示为下标字符串。

语法

我们可以按照以下语法使用 <sub> 标签。

<p> A <sub> start </sub> </p> // 输出为 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(); // 将字符串变量转换为下标。
let result = "x" + "24".sub(); // 将直接字符串与 sub() 方法一起使用

返回值

string.sub() 方法返回 <sub> 中的字符串HTML 标签。

<sub> 字符串 <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>

注意 - 字符串 sub() 方法已弃用,因此请使用 sub 标签。

我们已经学会了使用 JavaScript 将字符串渲染为下标。当我们需要使用 HTML 和 JavaScript 或仅使用 HTML 将数学符号、问题、化学公式等写入网页时,它很有用。


相关文章