javascript - 在javascript中分割数字以不同的字体大小显示小数点之后和之前的数字

Question

我有一个计划页面，向我的客户展示我的网站产品的 3 个计划 - 基本、高级和 VIP，所有计划都有月度和年度价格。

我从美国和印度的 $products 后端获得以下值，该产品仅在这两个国家/地区提供。因此，根据所选的国家/地区，我会为我的客户显示价格

退回美国的产品:

$products = [
          {
            monthly_price => "\$5.95”,
            yearly_price => "\$40.95",
            type => "basic"
          },
          {
            monthly_price => "\$10.95”,
            yearly_price => "\$80.95",
            type => "premium"
          },
          {
            monthly_price => "\$15.95”,
            yearly_price => "\$120.95",
            type => "vip"
          },
]

退回 IND 的产品:

$products = [
          {
            monthly_price => "\₹200.55",
            yearly_price => "\₹2500.55”,
            type => "basic"
          },
          {
            monthly_price => "\₹400.55",
            yearly_price => "\₹5000.55”,
            type => "premium"
          },
          {
            monthly_price => "\₹800.55",
            yearly_price => "\₹1000.55”,
            type => "vip"
          },
        ];

以下是 CSS 文件:

.main-price {
   font-size: 45px;
}

.decimal-price {
   font-size: 15px;
}

.term {
   font-size: 15px;
}

主要价格和小数价格具有不同的 CSS，我使用了下面的类。所以我在点 (.) 之后分割，这将是 2 个值。所以我将其设置为 .1 和 .2

以下是 HTML 文件:

[% FOR price in products -%]
    [% monthly_price = price.monthly_price.split('.') %]
    [% yearly_price = price.yearly_price.split('.') %]
    <h1>[% price.type.uc %]</h1>
    <p>
        <span class="main-price">[% monthly_price.1 %]</span>
        <span class="decimal-price">[% monthly_price.2 %]</span>
        <span class="term">per month</span>
    </p>
    <p>
        <span class="main-price">[% yearly_price.1 %]</span>
        <span class="decimal-price">[% yearly_price.2 %]</span>
        <span class="term">per year</span>
    </p>
[%- END %]

我也尝试了以下 3 种不同的解决方案，但它不起作用:

• 解决方案 1:

[% monthly_price.1 %]

• 解决方案 2:

[% monthly_price[0] %]

• 解决方案 3:

[% monthly_price.first %]

预期:

• 我想以 45 像素字体大小显示主要价格，并以 15 像素字体大小显示小数价格/条款。

问题:

• 未显示主要价格和小数价格

任何人都可以帮我解决我出错的地方吗？

提前致谢

Answer 1

我正在检查 JavaScript。运行良好。但你的代码不是纯javascript。所以，我不知道这种代码。

检查是否支持 split()。

<script>
var products = [
          {
            monthly_price : "\$5.95",
            yearly_price : "\$40.95",
            type : "basic"
          },
          {
            monthly_price : "\$10.95",
            yearly_price : "\$80.95",
            type : "premium"
          },
          {
            monthly_price : "\$15.95",
            yearly_price : "\$120.95",
            type : "vip"
          },
]
products.forEach(price => {
  var res=price.monthly_price.split('.');
  console.log(res[0]);
  console.log(res[1]);
});
</script>