Question

我需要附加一个小数但要加一个逗号，因此如果 300 ，它应该更改为 300,00 。我有下面的代码，它可以工作，但是如果数字已经是小数，它将更改为 NAN 。我需要代码不修改已经是小数的数字

 http://localhost:4200/assets/img/single_user.png 404 (Not Found)

    Image (async)       

push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.setAttribute    @   platform-browser.js:1087
push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.setAttribute @   core.js:11462
createElement   @   core.js:8134
createViewNodes @   core.js:10360
createEmbeddedView  @   core.js:10307
callWithDebugContext    @   core.js:11344
debugCreateEmbeddedView @   core.js:10845
push../node_modules/@angular/core/fesm5/core.js.TemplateRef_.createEmbeddedView @   core.js:8894
push../node_modules/@angular/core/fesm5/core.js.ViewContainerRef_.createEmbeddedView    @   core.js:8760
push../node_modules/@angular/common/fesm5/common.js.NgIf._updateView    @   common.js:3375
set @   common.js:3343
updateProp  @   core.js:9449
checkAndUpdateDirectiveInline   @   core.js:9200
checkAndUpdateNodeInline    @   core.js:10507
checkAndUpdateNode  @   core.js:10469
debugCheckAndUpdateNode @   core.js:11102
debugCheckDirectivesFn  @   core.js:11062
(anonymous) @   LoginComponent.html:1
debugUpdateDirectives   @   core.js:11054
checkAndUpdateView  @   core.js:10451
callViewAction  @   core.js:10692
execComponentViewsAction    @   core.js:10634
checkAndUpdateView  @   core.js:10457
callViewAction  @   core.js:10692
execEmbeddedViewsAction @   core.js:10655
checkAndUpdateView  @   core.js:10452
callViewAction  @   core.js:10692
execComponentViewsAction    @   core.js:10634
checkAndUpdateView  @   core.js:10457
callWithDebugContext    @   core.js:11344
debugCheckAndUpdateView @   core.js:11022
push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges  @   core.js:8838
(anonymous) @   core.js:4571
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @   core.js:4571
(anonymous) @   core.js:4462
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke    @   zone.js:391
onInvoke    @   core.js:3820
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke    @   zone.js:390
push../node_modules/zone.js/dist/zone.js.Zone.run   @   zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.run  @   core.js:3734
next    @   core.js:4462
schedulerFn @   core.js:3551
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub   @   Subscriber.js:195
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next   @   Subscriber.js:133
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next  @   Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next   @   Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @   Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit   @   core.js:3535
checkStable @   core.js:3789
onHasTask   @   core.js:3833
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask   @   zone.js:443
push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount  @   zone.js:463
push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount  @   zone.js:291
push../node_modules/zone.js/dist/zone.js.Zone.runTask   @   zone.js:212
drainMicroTaskQueue @   zone.js:601
Promise.then (async)        
scheduleMicroTask   @   zone.js:584
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask  @   zone.js:413
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask  @   zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @   zone.js:258
scheduleResolveOrReject @   zone.js:879
ZoneAwarePromise.then   @   zone.js:1012
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @   core.js:4345
./src/main.ts   @   main.ts:11
__webpack_require__ @   bootstrap:78
0   @   user.ts:6
__webpack_require__ @   bootstrap:78
checkDeferredModules    @   bootstrap:45
webpackJsonpCallback    @   bootstrap:32
(anonymous) @   main.js:1

    var formatter = new Intl.NumberFormat('es-ES', {
      style: 'currency',
      currency: 'USD',
    });
    $('.total-amount').each(function() {
      var x = $(this).text().replace(/[^\d,]/g, "");
      $(this).text(formatter.format(x));
    });

Answer 1

您只需在（，）

之后再添加一个额外的replace来替换结尾的文本

示例：

        var formatter = new Intl.NumberFormat('es-ES', {
          style: 'currency',
          currency: 'USD',
        });
        $('.total-amount').each(function() {
          var x = $(this).text().replace(/[^\d,]/g,"").replace(/,.*$/g,""); /*<- add this*/ 
          $(this).text(formatter.format(x));
        });

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="total-in-basket">
      <div class="total-description">
        total is:
      </div>
      <p> with decimal example: </p>
      <div class="total-amount">
        $ 300,00
      </div>
      <p> without decimal example: </p>
      <div class="total-amount">
        $ 300
      </div>
    </div>

Answer 2

我会做类似的事情：

const formatCurrency = function (number) {
   const f = new Intl.NumberFormat('es-ES', { style: 'currency', currency: 'USD' });
   if (number != parseInt(number, 10)) {
      return number;
   }
   return f.format(number)
}

并以相同的方式使用它：

$('.total-price').each(function() {
    var x = $(this).text().replace(/[^\d,]/g, "");
    $(this).text(formatCurrency(x));
});

这样，您将仅在数字为整数时设置其格式，否则返回未经修改的数字。

Answer 3

您可以使用includes()来检查文本中是否已经有逗号。

var formatter = new Intl.NumberFormat('es-ES', {
style: 'currency',
 currency: 'USD',
});
$('.total-amount').each(function() {
  let text = $(this).text();
  if(!text.includes(',')){
    var x = text.replace(/[^\d,]/g, "");
    $(this).text(formatter.format(x));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="total-in-basket">
 <div class="total-description">
total is:
  </div>
<div class="total-amount">
$ 12,200
  </div>
</div>

如果为整数，则附加，00

3 个答案: