Okt 2008

JavaScript-Operatoren für Zuweisungen, Vergleiche, Berechnungen und Strings

 
 

Operatoren führen mathematische Berechnungen aus, vergleichen Werte und Ergebnisse von Abfragen und weisen einer Variablen einen Wert zu. In der Regel werden sie durch ein mathematisches Symbol wie ein „+“-, „-“- oder „=“-Zeichen dargestellt, aber manchmal sind sie auch ein Wort wie typeOf oder instanceOf. Die Daten, auf denen Operatoren operieren, heißen Operanden.

Operatoren lassen sich in Kategorien zusammenfassen:

  • Der einzige String-Operator ist die Konkatenation zweier Strings
  • Mathematische Operatoren führen mathematische Berechnungen durch
  • Vergleichsoperatoren vergleichen zwei Werte, Variablen oder Anweisungen
  • Zuweisungsoperatoren weisen Variablen Werte zu
  • Logische Operatoren vergleichen zwei bedingte Anweisungen, um zu prüfen, ob eine oder beide Bedingungen true oder false liefern
  • Bitweise Operatoren führen logische Operationen auf dem Bitlevel aus
  • Spezielle Operatoren führen Aufgaben durch und versuchen, überflüssigen Code zu eliminieren.
String Arithmetik Vergleichen
Konkatenation + Addition + Gleich ==
Zuweisung Subtraktion - Nicht gleich !=
Wird zu = Multiplikation * Strenges Gleich ===
Addieren u. Zuweisen += Division / Strenges Nicht gleich !==
Subtrahieren u. Zweisen -= Modulo % Größer als >
Modulo u. Zuweisen %= Inkrement ++ Kleiner als <
Dividieren u. Zuweisen /= Dekrement -- Größer oder Gleich >=
Multiplizieren u. Zuweisen *= Negation - Kleiner oder Gleich <=
Logische Operatoren Bitweise Spezielle Operatoren
NOT ! AND   Ternary ?:
OR || OR | Test typeof
AND && XOR   Ist Instanz von instanceof
  Nach Links << Löschen delete
    Nach Rechts >> Test in
    Nach Rechts und mit Nullen füllen >>> Erzeugen new
    Bitweises Komplement ~ Evaluieren void
      Aktuelles Objekt this

String-Operatoren

Der +-Operator

Der +-Operator wird sowohl zur Addition als auch zum Zusammenfügen von zwei oder mehr Zeichenketten (auch als „Konkatenation“ bezeichnet) benutzt. Aus mehreren individuellen Zeichenketten entsteht eine neue Zeichenkette:

var brot = "Brot";
var butter = "Butter";
var salz = "Salz";
var myNewString = brot + ', ' + butter + ' und ' + salz;
alert(myNewString);

Die neue Zeichenkette wird aus den drei Variablen brot, butter und salz und zwei literalen Strings ', ' und ' und ' zusammengesetzt.

Der +-Operator ist doppelt belegt und ist auch der arithmetische +-Operator. Sobald einer der beiden Operanden eine Zeichenkette ist, fügt der +-Operator die beiden Operanden zu einem String zusammen.

var sum = 35 + 15 + " €";

erzeugt 3515 € und nicht 50 €.

Mathematische Operatoren

Addition +

Der +-Operator addiert zwei Werte miteinander. 

var x = 17;
var y = 23;
var z = x + y;

+ 

<form action="jsOperatoren.shtml" method="get" id="jsopF3">
<p><input type="text" id="add1" size="6" /> + 
   <input type="text" id="add2" size="6" /> <input type="submit" value="=" />  
   <input type="text" id="opRes" disabled="disabled" /></p>
</form>

var jsopF3 = document.getElementById('jsopF3');
jsopF3.onsubmit = function() {
   var x = document.getElementById('x').value;
   var y = document.getElementById('y').value;
   var z = document.getElementById('opRes');
   x = x.replace(/,/, ".");     // Ersetzt ein Komma in der 
   y = y.replace(/,/, ".");     // Zahl durch einen Dezimalpunkt
   
   if (isNaN(parseFloat(x)) || isNaN(parseFloat(y))) {
      z.value = "Fehler: keine Zahl";
   } else {
      z.value = parseFloat(x) + parseFloat(y);
   }
   return false;
}

Benutzereingaben in Formularfeldern liefern in Javascript immer einen String. Um arithmetische Operation mit Benutzereingaben auszuführen, wandeln parseInt() oder parseFloat() die Werte aus den Eingabefeldern in ganze Zahlen bzw. Fließkommazahlen um.

Die Anweisung var x = document.getElementById('x').value; liest den Wert des ersten Eingabefelds und weist ihn der Variablen x zu, die zweite Anweisung belegt entsprechend die Variable y. Erst wenn durch if (isNaN(parseFloat(x)) || isNaN(parseFloat(y))) sicher gestellt ist, dass x und y tatsächlich Zahlen sind, findet die eigentliche Operation statt: z.value = parseFloat(x) + parseFloat(y); addiert den Wert aus Feld x mit dem Wert aus Feld y und setzt das Ergebnis ist das Feld z.

Subtraktion

Der --Operator subtrahiert den zweiten Wert vom ersten.

var z = x - y;
Multiplikation

Der *-Operator multipliziert zwei Werte miteinander. 

var z = x * y;
Division

Teilt den ersten Wert durch den zweiten Wert. 

var z = x / y;
Modulo

Der %-Operator teilt den ersten Wert durch den zweiten Wert und gibt den Rest der Division an z zurück. 

var z = x % y;
Inkrement

Der ++-Operator zählt 1 zum Wert hinzu. 

var x = 21;
var z = x++; 
// x ist 21 vor der Zuweisung, also wird z auch 21, aber x wird 22
var z = ++x;
// x wird 22 vor der Zuweisung, also wird z 23 und x wird ebenfalls 22
Dekrement

Zieht 1 vom Wert ab 

var x = 100;
var z = x--;
// x ist 100 vor der Zuweisung, also wird z 100, aber x wird 99
var z = --x;
// x wird 99 vor der Zuweisung, also wird z 99 und x wird ebenfalls 99
Negation

Dreht das Vorzeichen des Werts um 

var z = x-;

Zuweisungs-Operatoren

Zuweisung

Der =-Operator weist der Variablen x den Wert y zu. 

x = y;
Addieren und Zuweisen

Der +=-Operator addiert y zu x und weist dann der Variablen x den neuen Wert zu. 

x += y;        // wirkt genauso wie x = x + y;
Subtrahieren und Zuweisen

Der -=-Operator subtrahiert y von x und weist dann der Variablen x den neuen Wert zu.

x -= y;        // wirkt genauso wie x = x - y
Multiplizieren und Zuweisen

Der *=-Operator multipliziert y mit x und weist dann der Variablen x den neuen Wert zu.

x *= y;        // wirkt genauso wie x = x * y
Dividieren und Zuweisen

Der /=- Operator dividiert x durch y und weist dann der Variablen x den neuen Wert zu.

x /= y;         // wirkt genauso wie x = x / y
Modulo und Zuweisen

Der %=-Operator dividiert x durch y, bildet den Rest und weist dann der Variablen x den neuen Wert – diesen Rest – zu. 

x %= y;         // wirkt genauso wie x = x % y

Logische Operatoren

NOT

Der !-Operator gibt true zurück, wenn der Operand den Wert false aufweist. 

var x = 200;
…
if (!x) // false, denn x ist definiert und initialisiert

Liest sich: Wenn x false ist …

OR – „logisches Oder“

Der ||-Operator gibt true zurück, wenn der linke oder rechte Wert oder beide true sind. 

var x = 20;
var y = 200;
if (x > 10 || y < 5) // gibt true zurück, denn x > 10

Liest sich: Wenn x größer als 10 ist oder y kleiner als 5 ist …

Das gibt uns eine komfortable Methode, um Defaultwerte zu deklarieren:

myVal = v || 10;

Wenn der erste Operand false, null, undefined, "" (leere Zeichenkette) oder die Zahl 0 zurückgibt, gibt der ||-Operator den zweiten Operanden zurückgegeben, ansonsten den ersten Operanden.

AND – „logisches Und“

&& gibt true zurück, wenn sowohl der linke als auch der rechte Wert true sind. 

var x = 20;
var y = 0;
if (x > 100 && y < 5) // true, denn beide Seiten liefern true

Liest sich: Wenn x größer als 100 ist und y kleiner als 5 ist …

Damit kann man schnell einen null-Check durchführen:

var myVal = p && p.name

Wenn der erste Operand false, null, undefined, "" (leere Zeichenkette) oder die Zahl 0 zurückgibt, gibt der &&-Operator den ersten Operanden zurück, ansonsten den zweiten Operanden.

Bitweise Operationen

Bitweise Operatoren führen logische Operationen und Schiebeoperationen durch. Sie operieren auf den Operanden, als wären diese eine Folge von 32 Bits, geben aber eine Dezimalzahl zurück.

Bitweise AND

Der &-Operator gibt eine 1 für jede Stelle zurück, an der die korrespondierenden Bits beider Operanden 1 ist. 

var x = 2;             // 0000 0010
var y = 42;            // 0010 1010

var z = x & y;         // 0000 0010 = 2

Bitweise OR

Der |-Operator gibt eine 1 für jede Stelle zurück, an der eines oder beide der korrespondierenden Bits der Operanden 1 sind. 

var x = 2;             // 0000 0010
var y = 42;            // 0010 1010

var z = x | y;         // 0010 1010 = 42

Bitweise XOR

Der ^-Operator gibt eine 1 zurück für jede Stelle, an der genau einer (aber nicht beide) korrespondierenden Bits der Operanden 1 sind. 

var x = 2;             // 0000 0010
var y = 42;            // 0010 1010

var z = x ^ y;         // 0010 1000 = 40

Nach links schieben

Der <<Operator schiebt die Bits des ersten Operanden nach links, und zwar um die Anzahl der Stellen, die im zweiten Operanden notiert sind. Die Stellen, die dabei auf der rechten Seite entstehen werden mit Nullen gefüllt und alle Nullen und Einsen, die auf der linken Seite herausfallen, werden gelöscht. Das Verschieben des binären Werts nach links um n Stellen entspricht der Multiplikation mit 2n. 

var x = 1024;           // 0100 0000 0000
x = x<<2;               // 1000 0000 0000
alert(x);               // gibt 4096 aus

um nach links schieben 

<form action="jsOperatoren.shtml" method="get" id="jsopF4">
<fieldset>
   <input type="text" id="jsopX" size="6" /> um 
   <input type="text" id="jsopS" size="2" /> nach links schieben
   <input type="text" id="jsopY" size="18" disabled="disabled" /> 
   <input type="submit" value="Los" /> <input type="reset" value="Löschen" />
</fieldset>
</form>

<script type="text/javascript">
// <!--
var jsopF4 = document.getElementById('jsopF4');
jsopF4.onsubmit = function() {
   var x = document.getElementById('jsopX').value;
   var s = document.getElementById('jsopS').value;
   var y = document.getElementById('jsopY');
   x = parseInt(x);
   s = parseInt(s);
   if (isNaN(x) || isNaN(s)) {
      y.value = "Fehlerhafte Eingabe";
   } else {
      y.value = x<<s;
   }
   return false;
}
// -->
</script>
Nach rechts verschieben

Der >>-Operator schiebt die Ziffern der Binärdarstellung des ersten Operanden nach rechts, und zwar um die Anzahl der Stellen, die im zweiten Operanden notiert sind und löscht dabei alle Ziffern, die nach rechts herausgeschoben werden. Das Bits der linken Seite werden kopiert, so dass das Vorzeichen der Zahl erhalten bleibt. Das Verschieben des Binärwerts um n Stellen entspricht der Division durch 2n. 

var x = -1024;           // 1111 1100 0000 0000
x = x>>4;                // 1111 1111 1100 0000 = -64
alert(x);

Nach rechts verschieben und mit Nullen auffüllen

Der >>>-Operator schiebt die Binärdarstellung des ersten Operanden nach rechts, und zwar um die Anzahl der Stellen, die im zweiten Operanden notiert sind. Bits, die dabei zur rechten Seite herausfallen, werden gelöscht und auf der linken Seite werden Nullen eingesetzt. Der >>>-Operator funktioniert also genauso wie der >>-Operator, aber negative Werte verlieren ihr Vorzeichen.

Bitweises Komplement

Der ~-Operator komplementiert die Stellen des Binärwerts – aus Null wird Eins und aus Eins wird Null. 

var y = 42;         // ... 0000 0010 1010

var z = ~y;         // ... 1111 1101 0101 = -43

Ausführungsreihenfolge

Die Mathematik und der Computer mögen es ordentlich. Alles hat eine Funktion und eine Reihenfolge, in der es durchgeführt wird. Wenn ein Ausdruck mehrere Operationen enthält, gibt es also ein feste Rangfolge, in der die Operatoren angewendet werden: Zuerst werden immer die Operationen in Klammern ausgeführt, beginnend bei der innersten Klammer. Bei gleicher Rangfolge werden die Operatoren von links nach rechts angewendet. Zuweisungen haben die niedrigste Priorität – der Ausdruck auf der rechten Seite einer Zuweisung wird vor der Ausführung immer ausgewertet.

  • 2 + 4 * 7 wird als (4 * 7) + 2 berechnet, da die Multiplikation vor der Addition rangiert
  • 7 * (2 + 4) wird als (2 + 4) * 7 berechnet, da der Ausdruck in der Klammer vor der Multiplikation rangiert
( ) [ ]
function()
! ~ - ++ -- new typeof void delete
* / %
+ -
<< >> >>>
< <= > >=
== !=
&
^
|
&&
||
? :
= += %= ⁄= -= *= <<= >>= &= ^= |=
,
   


Copyright © 2000 - 2010 Media Engineering Alle Rechte vorbehalten
Design + Programmierung Media Engineering U. Häßler 47506 Neukirchen-Vluyn • Impressum und Nutzungsbestimmungen