Linuchss: Javascript: float formatiert ausgeben

Moin,

vermutlich habe ich nur ein Brett vor dem Kopf. Kann es sein, dass Javascript Fließkommazahlen nicht formatieren kann?

Ich möchte doch nur value eines Schiebereglers anzeigen: 0.5 .. 1.0 .. 1.5

Finde aber nicht, wie ich eine Vor- und eine Nachkommastelle ausgeben kann. Die 0 hinter der 1 ist deshalb wichtig, weil sonst die Anzeige (eine Stelle statt 3 Stellen) hin und her hüpft.

Dies unterdrückt die 0:

document.getElementById("tempoId").innerHTML = "Tempo " +Math.round(tempo*10)/10;  // 0.9 1.0 1.1 ..

Den Artikel Zahlen formatieren könnte ich wohl gebrauchen, aber „Die folgende Funktion“ wird nicht verraten. Im Quellcode sehe ich sowas: f.out.value = zahl.format(f.stellen.value, f.fix.checked);

document.getElementById("tempoId").innerHTML = "Tempo " +tempo.format(1,true);  // 0.9 1.0 1.1 ..

JS meint dazu: Uncaught TypeError: tempo.format is not a function

Linuchs

  1. Hallo Linuchss,

    hast Du denn das entsprechende js eingebunden? Das ist ein "selbstgemachte" Funktion des Seitenautors, die er an Number.prototype anhängt. Die Funktion ist sehr low-level und funktioniert mutmaßlich auch mit einem uralten IE.

    https://javascript.jstruebig.de/js/num_format.js

    Alternativ verwende Intl.Numberformat, was in unserem Wiki leider noch nicht aufgeführt ist.

    let format1 = new Intl.NumberFormat("de-DE", { 
       mininumFractionDigits: 1,
       maximumFractionDigits: 1 });
    
    
    document.getElementById("tempoId").textContent = "Tempo " +format1.format(tempo);
    

    Ich verwende textContent statt innerHTML, weil ja kein HTML gesetzt wird, sondern nur Text.

    Den Formatierer erzeugst Du nur einmal und legst ihn irgendwo zentral global ab.

    Du kannst noch weitere Optionen setzen: minimumIntegerDigits, aber wenn Du das auf 3 setzt und die 42 formatierst, kommt "042,0" heraus.

    Wenn Du einen Dezimalpunkt an Stelle eines Dezimalkommas willst, verwende ein entsprechendes Locale beim Erzeugen des Formatierers.

    Wenn Du das Ergebnis links mit Leerstellen auffüllen willst (vermutlich nicht wenn es um deine Mischpultseite geht), benutze noch padStart. Das braucht für den IE allerdings ein Polyfill.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. Hallo Rolf,

      heute ist der Wurm drin. Hatte meine Frage in einem Tab stehen gelassen und darauf gewartet, dass Antwort kommt. Die wurde nicht ergänzt und ich habe eine Krücke konstruiert.

      Erst nach Neuladen des Tabs sehe ich, dass schon vor zwei Stunden Antwort kam.

      Meine Krücke:

      var tempo = document.getElementById("tempo").value;
      document.getElementById("tempoId").innerHTML = "Tempo " +(( tempo == "1" ) ? "1.0" : tempo);
      

      funktioniert für den Wertebereich 0.1 .. 1.9

      Vermutlich sind viele Versuche daran gescheitert, dass ich tempo für eine Zahl gehalten habe. Irgendwann sah ich mit typeof, es ist ein String.

      Habe jetzt mal deinen Vorschlag eingebaut. Der löst mein Problem leider nicht, zeigt 1 statt 1.0

      Linuchs

    2. Hallo Rolf,

      hast Du denn das entsprechende js eingebunden?

      Nein, das Ding sieht kompliziert aus und hat ja eine fast endlose Diskussion mit zahlreichen Fehlermeldungen ausgelöst.

      Linuchs

      1. Hallo Linuchss,

        hä? Wenn Du das .js nicht einbindest, wo die beschriebene Funktion drin ist, dann musst Du Dich nicht wundern, wenn es die Funktion nicht gibt. Aber so ein handgemachtes Ding braucht man heute nicht mehr.

        Mein Vorschlag mit NumberFormat sollte funktionieren, egal ob tempo ein String oder eine Number ist. Klappt bei mir in Chrome und Fuchs problemlos.

        NumberFormat im Firefox

        Gunnars .toFixed ist noch einfacher, du musst dann nur vorher den String in eine Zahl umwandeln.

        Entweder: "Tempo: " + Number(tempo).toFixed(1)
        Oder: "Tempo: " + (0+tempo).toFixed(1)

        Rolf

        --
        sumpsi - posui - obstruxi
        1. @@Rolf B

          Gunnars .toFixed ist noch einfacher, du musst dann nur vorher den String in eine Zahl umwandeln.

          Musst du nicht, wenn du den Wert schon als Zahl vom Eingabefeld ausliest: valueAsNumber. Guckst du.

          😷 LLAP

          --
          Wenn der Faschismus wiederkehrt, wird er nicht sagen: „Hallo, ich bin der Faschismus.“ Er wird sagen: „Hört auf zu zählen! Ich habe gewonnen!“
  2. @@Linuchss

    vermutlich habe ich nur ein Brett vor dem Kopf. Kann es sein, dass Javascript Fließkommazahlen nicht formatieren kann?

    Ersteres ja, letzteres nein.

    Ich möchte doch nur value eines Schiebereglers anzeigen: 0.5 .. 1.0 .. 1.5

    Finde aber nicht, wie ich eine Vor- und eine Nachkommastelle ausgeben kann.

    Number.toFixed()

    😷 LLAP

    --
    Wenn der Faschismus wiederkehrt, wird er nicht sagen: „Hallo, ich bin der Faschismus.“ Er wird sagen: „Hört auf zu zählen! Ich habe gewonnen!“
    1. Hallo Gunnar,

      Number.toFixed()

      Ja, da war ich auch dran, bevor ich merkte, dass die Variable tempo gar keine Zahl, sondern ein String ist. Hat natürlich nicht geklappt.

      Ich probier's nochmal.

      Linuchs

    2. Hallo Gunnar,

      Number.toFixed()

      Danke, das tut auf einfache Weise, was ich möchte.

      document.addEventListener('DOMContentLoaded', function () {
        document.querySelector('#tempo').addEventListener('input', setTempo);
        setTempo();
      });
      function setTempo() {
        var tempo = document.getElementById("tempo").value;
        document.getElementById("tempoId").textContent = "Tempo " +Number.parseFloat(tempo).toFixed(1);
        for ( let i=0; i < arr_ausgewaehlte_audios.length; i++ ) {
          arr_ausgewaehlte_audios[i].playbackRate  = tempo;
        }
        return false;
      };
      

      Linuchs

  3. Hi there,

    vermutlich habe ich nur ein Brett vor dem Kopf. Kann es sein, dass Javascript Fließkommazahlen nicht formatieren kann?

    am schnellsten geht ein Cast, Du gibst die Zahl einfach als String aus indem du einen Leerstring anhängst; sowas in der Art von:

    1.5+'';

    Den Artikel Zahlen formatieren könnte ich wohl gebrauchen, aber „Die folgende Funktion“ wird nicht verraten.

    Hää? Wie gibt's bei Javascript zu "verraten"? Das steht ja eh alles im Quelltext da. Ich glaub' nicht, daß Struppi da einen Obfuscierer drüber laufen lassen hat (und selbst das könnte man wieder aufdröseln)…

  4. @@Linuchss

    Die 0 hinter der 1 ist deshalb wichtig, weil sonst die Anzeige (eine Stelle statt 3 Stellen) hin und her hüpft.

    Damit da nichts hin und her hüpft, muss auch ein Font verwendet werden, der gleichbreite Ziffern (tabular numbers) enthält. Moderne Fonts enthalten beides: Tabellenziffern und Proportionalziffern. Auswahl des OpenType-Features per CSS: font-variant-numeric: tabular-nums.

    (Der Vollständigkeit halber: Wenn man Wert auf IE und andere Browserexoten legt, könnte man auch font-feature-settings: "tnum" verwenden. Das aber mit äußerster Vorsicht, weil es andere eventuell vorhandene (auch vererbte) font-feature-settings-Angaben nicht ergänzt, sondern überschreibt. Also eher nicht verwenden, sondern font-variant-numeric, was in allen relevanten Browsern funktioniert. Und wenn’s in irrelevanten Browsern doch etwas hüpft – so what?)

    😷 LLAP

    --
    Wenn der Faschismus wiederkehrt, wird er nicht sagen: „Hallo, ich bin der Faschismus.“ Er wird sagen: „Hört auf zu zählen! Ich habe gewonnen!“
    1. Damit da nichts hin und her hüpft, muss auch ein Font verwendet werden, der gleichbreite Ziffern (tabular numbers) enthält.

      Ja klar, dafür nutze ich monospace.

      Und wenn’s in irrelevanten Browsern doch etwas hüpft – so what?)

      Da die Anzeige Teil einer zentrierten Zeile ist, hüpfen die drei Buttons auch mit. Sieht aus, als hätte ich die Web-Gestaltung nicht im Griff.

      Linuchs