Javascript: float formatiert ausgeben – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Javascript: float formatiert ausgeben Wed, 02 Dec 20 15:49:41 Z https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778768#m1778768 https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778768#m1778768 <p>Moin,</p> <p>vermutlich habe ich nur ein Brett vor dem Kopf. Kann es sein, dass Javascript Fließkommazahlen nicht formatieren kann?</p> <p>Ich möchte doch nur value eines Schiebereglers anzeigen: 0.5 .. 1.0 .. 1.5</p> <p>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.</p> <p>Dies unterdrückt die 0:</p> <pre><code class="block language-js">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"tempoId"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"Tempo "</span> <span class="token operator">+</span>Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>tempo<span class="token operator">*</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">10</span><span class="token punctuation">;</span> <span class="token comment">// 0.9 1.0 1.1 ..</span> </code></pre> <p>Den Artikel <a href="https://javascript.jstruebig.de/faq/37/" rel="nofollow noopener noreferrer">Zahlen formatieren</a> könnte ich wohl gebrauchen, aber „Die folgende Funktion“ wird nicht verraten. Im Quellcode sehe ich sowas: <code>f.out.value = zahl.format(f.stellen.value, f.fix.checked);</code></p> <pre><code class="block language-js">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"tempoId"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"Tempo "</span> <span class="token operator">+</span>tempo<span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 0.9 1.0 1.1 ..</span> </code></pre> <p>JS meint dazu: <code>Uncaught TypeError: tempo.format is not a function</code></p> <p><a href="/images/5f6a6a22-34b5-11eb-9f6d-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/5f6a6a22-34b5-11eb-9f6d-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>Linuchs</p> Javascript: float formatiert ausgeben Wed, 02 Dec 20 16:11:34 Z https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778772#m1778772 https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778772#m1778772 <p>Hallo Linuchss,</p> <p>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.</p> <p><a href="https://javascript.jstruebig.de/js/num_format.js" rel="nofollow noopener noreferrer">https://javascript.jstruebig.de/js/num_format.js</a></p> <p>Alternativ verwende <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat" rel="nofollow noopener noreferrer">Intl.Numberformat</a>, was in unserem Wiki leider noch nicht aufgeführt ist.</p> <pre><code class="block language-js"><span class="token keyword">let</span> format1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Intl<span class="token punctuation">.</span>NumberFormat</span><span class="token punctuation">(</span><span class="token string">"de-DE"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">mininumFractionDigits</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">maximumFractionDigits</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"tempoId"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">"Tempo "</span> <span class="token operator">+</span>format1<span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span>tempo<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Ich verwende textContent statt innerHTML, weil ja kein HTML gesetzt wird, sondern nur Text.</p> <p>Den Formatierer erzeugst Du nur einmal und legst ihn irgendwo zentral global ab.</p> <p>Du kannst noch weitere Optionen setzen: minimumIntegerDigits, aber wenn Du das auf 3 setzt und die 42 formatierst, kommt "042,0" heraus.</p> <p>Wenn Du einen Dezimalpunkt an Stelle eines Dezimalkommas willst, verwende ein entsprechendes Locale beim Erzeugen des Formatierers.</p> <p>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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Javascript: float formatiert ausgeben Wed, 02 Dec 20 16:28:12 Z https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778776#m1778776 https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778776#m1778776 <p>@@Linuchss</p> <blockquote> <p>vermutlich habe ich nur ein Brett vor dem Kopf. Kann es sein, dass Javascript Fließkommazahlen nicht formatieren kann?</p> </blockquote> <p>Ersteres ja, letzteres nein.</p> <blockquote> <p>Ich möchte doch nur value eines Schiebereglers anzeigen: 0.5 .. 1.0 .. 1.5</p> <p>Finde aber nicht, wie ich eine Vor- und eine Nachkommastelle ausgeben kann.</p> </blockquote> <p><a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed" rel="nofollow noopener noreferrer"><code class="language-js">Number<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code></a></p> <p> LLAP</p> <div class="signature">-- <br> 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!“ </div> Javascript: float formatiert ausgeben Wed, 02 Dec 20 16:53:25 Z https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778781#m1778781 https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778781#m1778781 <p>Hi there,</p> <blockquote> <p>vermutlich habe ich nur ein Brett vor dem Kopf. Kann es sein, dass Javascript Fließkommazahlen nicht formatieren kann?</p> </blockquote> <p>am schnellsten geht ein Cast, Du gibst die Zahl einfach als String aus indem du einen Leerstring anhängst; sowas in der Art von:</p> <blockquote> <pre><code class="block language-js"></code></pre> </blockquote> <p>1.5+'';</p> <blockquote> <pre><code class="block"></code></pre> </blockquote> <blockquote> <p>Den Artikel <a href="https://javascript.jstruebig.de/faq/37/" rel="nofollow noopener noreferrer">Zahlen formatieren</a> könnte ich wohl gebrauchen, aber „Die folgende Funktion“ wird nicht verraten.</p> </blockquote> <p>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)…</p> Javascript: float formatiert ausgeben Thu, 03 Dec 20 07:53:49 Z https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778815#m1778815 https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778815#m1778815 <p>@@Linuchss</p> <blockquote> <p>Die 0 hinter der 1 ist deshalb wichtig, weil sonst die Anzeige (eine Stelle statt 3 Stellen) hin und her hüpft.</p> </blockquote> <p>Damit da nichts hin und her hüpft, muss auch ein Font verwendet werden, der gleichbreite Ziffern (<strong lang="en">tabular numbers</strong>) enthält. Moderne Fonts enthalten beides: Tabellenziffern und Proportionalziffern. Auswahl des OpenType-Features per CSS: <code class="good">font-variant-numeric: tabular-nums</code>.</p> <p>(Der Vollständigkeit halber: Wenn man Wert auf IE und andere Browserexoten legt, könnte man auch <code class="bad">font-feature-settings: "tnum"</code> verwenden. Das aber mit äußerster Vorsicht, weil es andere eventuell vorhandene (auch vererbte) <code>font-feature-settings</code>-Angaben nicht ergänzt, sondern überschreibt. Also eher nicht verwenden, sondern <code>font-variant-numeric</code>, was in allen relevanten Browsern funktioniert. Und wenn’s in irrelevanten Browsern doch etwas hüpft – <em lang="en">so what?</em>)</p> <p> LLAP</p> <div class="signature">-- <br> 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!“ </div> Javascript: float formatiert ausgeben Wed, 02 Dec 20 18:15:15 Z https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778791#m1778791 https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778791#m1778791 <p>Hallo Rolf,</p> <p>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.</p> <p>Erst nach Neuladen des Tabs sehe ich, dass schon vor zwei Stunden Antwort kam.</p> <p>Meine Krücke:</p> <pre><code class="block language-js"><span class="token keyword">var</span> tempo <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"tempo"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"tempoId"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"Tempo "</span> <span class="token operator">+</span><span class="token punctuation">(</span><span class="token punctuation">(</span> tempo <span class="token operator">==</span> <span class="token string">"1"</span> <span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token string">"1.0"</span> <span class="token operator">:</span> tempo<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>funktioniert für den Wertebereich 0.1 .. 1.9</p> <p>Vermutlich sind viele Versuche daran gescheitert, dass ich <code>tempo</code> für eine Zahl gehalten habe. Irgendwann sah ich mit typeof, es ist ein String.</p> <p>Habe jetzt mal deinen Vorschlag eingebaut. Der löst mein Problem leider nicht, zeigt <code>1</code> statt <code>1.0</code></p> <p>Linuchs</p> Javascript: float formatiert ausgeben Wed, 02 Dec 20 18:19:34 Z https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778792#m1778792 https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778792#m1778792 <p>Hallo Rolf,</p> <blockquote> <p>hast Du denn das entsprechende js eingebunden?</p> </blockquote> <p>Nein, das Ding sieht kompliziert aus und hat ja eine fast endlose Diskussion mit zahlreichen Fehlermeldungen ausgelöst.</p> <p>Linuchs</p> Javascript: float formatiert ausgeben Wed, 02 Dec 20 18:22:30 Z https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778793#m1778793 https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778793#m1778793 <p>Hallo Gunnar,</p> <blockquote> <p>Number.toFixed()</p> </blockquote> <p>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.</p> <p>Ich probier's nochmal.</p> <p>Linuchs</p> Javascript: float formatiert ausgeben Wed, 02 Dec 20 18:53:29 Z https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778797#m1778797 https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778797#m1778797 <p>Hallo Gunnar,</p> <blockquote> <p>Number.toFixed()</p> </blockquote> <p>Danke, das tut auf einfache Weise, was ich möchte.</p> <pre><code class="block language-js">document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'DOMContentLoaded'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#tempo'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">,</span> setTempo<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">setTempo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">setTempo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> tempo <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"tempo"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"tempoId"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">"Tempo "</span> <span class="token operator">+</span>Number<span class="token punctuation">.</span><span class="token function">parseFloat</span><span class="token punctuation">(</span>tempo<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> arr_ausgewaehlte_audios<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> arr_ausgewaehlte_audios<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>playbackRate <span class="token operator">=</span> tempo<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre> <p>Linuchs</p> Javascript: float formatiert ausgeben Wed, 02 Dec 20 18:35:54 Z https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778795#m1778795 https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778795#m1778795 <p>Hallo Linuchss,</p> <p>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.</p> <p>Mein Vorschlag mit NumberFormat sollte funktionieren, egal ob tempo ein String oder eine Number ist. Klappt bei mir in Chrome und Fuchs problemlos.</p> <p><a href="/images/2b6d39da-34cd-11eb-900f-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/2b6d39da-34cd-11eb-900f-b42e9947ef30.png" alt="NumberFormat im Firefox" loading="lazy"></a></p> <p>Gunnars .toFixed ist noch einfacher, du musst dann nur vorher den String in eine Zahl umwandeln.</p> <p>Entweder: <code>"Tempo: " + Number(tempo).toFixed(1)</code><br> Oder: <code>"Tempo: " + (0+tempo).toFixed(1)</code></p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Javascript: float formatiert ausgeben Wed, 02 Dec 20 20:01:55 Z https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778803#m1778803 https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778803#m1778803 <p>@@Rolf B</p> <blockquote> <p>Gunnars .toFixed ist noch einfacher, du musst dann nur vorher den String in eine Zahl umwandeln.</p> </blockquote> <p>Musst du nicht, wenn du den Wert schon als Zahl vom Eingabefeld ausliest: <code>valueAsNumber</code>. <a href="https://codepen.io/gunnarbittersmann/pen/WNGQKoW" rel="noopener noreferrer">Guckst du.</a></p> <p> LLAP</p> <div class="signature">-- <br> 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!“ </div> Javascript: float formatiert ausgeben Thu, 03 Dec 20 14:55:31 Z https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778829#m1778829 https://forum.selfhtml.org/self/2020/dec/02/javascript-float-formatiert-ausgeben/1778829#m1778829 <blockquote> <p>Damit da nichts hin und her hüpft, muss auch ein Font verwendet werden, der gleichbreite Ziffern (tabular numbers) enthält.</p> </blockquote> <p>Ja klar, dafür nutze ich monospace.</p> <blockquote> <p>Und wenn’s in irrelevanten Browsern doch etwas hüpft – so what?)</p> </blockquote> <p>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.</p> <p>Linuchs</p>