Javascript format 货币自定义格式

Question

我需要格式化数字的帮助。我的输出是货币格式。所以 234.22 美元但我需要做到这一点，所以 22 在视觉上看起来像是 22 的幂，而“.”不再显示。

所以美元 = X； Cents = Power to.(visualy).
X^美分

可以通过切割数字、格式化 Dollars/cents 并让它们像那样显示来做一些奇怪的逻辑，但如果有图书馆或更简单的方法，我会徘徊。

所有搜索都给我平方 roots/power 和其他数学函数

Answer 1

您需要这样显示结果：

<div class="parent">
    <div id="first" style="display: inline-block;font-size: 20px;">
        4
    </div>
    <div id="second" style="display: inline-block;padding-left: 5px;vertical-align: super;">
        22
    </div>
</div>

Answer 2

绝对定位：

.parent{
  position:relative
}

.value{
  font-size:16px
}

.cent{
  font-size:10px;
  position:absolute;
  padding-left:2px;
  top:-10%
}

<div class="parent">
  <span class="value">0000</span>
  <span class="cent">23</span>
</div>

使用 flexbox：

.parent{
  display:flex;
  align-items:start
}

.cent{
  font-size:10px;
  padding-left:3px;
}

<div class="parent">
  <span class="value">0000</span>
  <span class="cent">23</span>
</div>

Javascript解法：

let string = "4.22"

let array = string.split('.')
const container = document.getElementById('output');
let value = document.createElement('span')
value.textContent = array[0]

let cent = document.createElement('span')
cent.textContent = array[1]
cent.classList.add('cent')

container.appendChild(value)
container.appendChild(cent)

#output{
  display:flex;
  align-items:start
}

.cent{
  font-size:10px;
  padding-left:3px;
}

<div id="output"></div>

Javascript format 货币自定义格式

Javascript format currency custom format

html

javascript

css

currency