String Erweiterungen
Eine der Eigenschaften von Javascript, die sie von anderen Programmiersprachen abhebt, ist die prototypische Vererbung. Kurz gesagt bedeutet das, dass jedes Objekt eine Eigenschaft .prototype
besitzt, von dem alle erzeugten Instanzen dieses Objektes erben (erben, ist nicht ganz korrekt. Es wird lediglich eine prototype chain aufgebaut, in der nach Funktionen gesucht wird. Aber das ist ein anderes Thema.).
Diese Art der Vererbung, hat Vorteile und auch Nachteile, mit denen sich etliche Artikel im Internet beschäftigen. Deshalb möchte ich hier auch gar nicht näher darauf eingehen, sondern eine Besonderheit dieser Methode zeigen, mit der es möglich ist, in Javascript vordefinierte Objekte um selbgeschriebene Funktionen zu erweitern.
Das String-Objekt bietet sich für Erweiterungen ganz besonders an, da es häufig zum Einsatz kommt und leider auch ein oft benötigte Funktionen nicht kennt.
Beispiel
Zuerst noch eine kleine Erläuterung, wie das ganze funktioniert. Beim erzeugen eines Objektes werden, wie oben erwähnt, die Eigenschaften des Objektes .prototype
, an jede neu erzeugte Instanz vererbt. Das Stringobjekt ist zwar in mancher Beziehung etwas besonderes, da es sowohl als primitver Datentyp, als auch als Objekt behandelt werden kann. Das spielt für die hier vorgestellten Funktionen insofern keine Rolle, da es egal ist, ob ein String mit var str = new String('...')
oder var str = '....'
erzeugt wird. In beiden Fällen, kann mit der Variabel str
alle Methoden aufgerufen werden, die das Objekt String.prototype
zu Verfügung stellt.
String.ltrim und String.rtrim
Diese Funktionen gibt es in vielen Programmiersprachen und haben den Zweck, eine Zeichenkette links (ltrim) oder rechts (rtrim), alle Leerzeichen zu entfernen. Das ist u.a. oft nötig, wenn z.b. eine Benutzereingabe auf Gültigkeit geprüft werden soll und es dabei keine Rolle spielt, ob Leerzeichen am Anfang oder am Ende eingegeben wurden.
Der Code, der das Stringobjekt um diese Funktionalität erweitert, sieht so aus:
String.prototype.rtrim = function () { if(!this.length) return ""; return this.replace(/s+$/g, ''); }; String.prototype.ltrim = function () { if(!this.length) return ""; return this.replace(/^s+/g, ''); }; |
In den Funktionen kommen reguläre Ausdrücke zum Einsatz, mit deren Hilfe alle sogenannten Whitespace-Zeichen gelöscht werden, entweder am Anfang oder am Ende der Zeichenkette (mehr über Reguläre Ausdrücke).
Das this
, ist in dem Fall immer die Zeichenkette selbst, deshalb ist für diese Funktionen kein Parameter notwendig, wie bei einer normalen Funktion. Das ist ein Vorteil dieser Art der Erweiterung von Objekten, in den Funktionen steht immer das Objekt selbst zu Verfügung. Ausserdem kann die Funktion nicht mit einem falschen Parameter aufgerufen werden, z.b. einer Zahl oder einem Objekt, den in der Funktion selbst ist this immer ein String also eine Zeichenkette, daher kann auch eine Gültigkeitsprüfung entfallen.
Beispiel
ein kleines Beispiel in Aktion:
Wie ich beim schreiben des Artikels festgestellt habe, sind mittlerweile ähnliche Funktionen in den Standard eingeflossen (sie heißen dort, trimLeft(), trimRight() und trim() und werden, zumindest von Firefox, ab der Version 3.5(s. MDC) unterstützt. Aber solange diese Methoden nicht in allen verbreiteten Browsern umgesetzt sind, muss man sich noch selbst behelfen.
Methoden
Ich habe in der Datei string.js das String Objekt um einige nützliche Methoden erweitert. Im einzelnen sind das:
- String.toDate()
- Die Methode versucht aus dem String ein Datum zu erzeugen und gibt, wenn es möglich ist, ein Date-Objekt zurück. Die Schreibweise wird dabei nach dem in Deutschland üblichen Muster ausgewertet
TT.MM.JJJJ HH:MM:SS
nicht nach der ISO Schreibweise. Die Uhrzeit ist optional, fließt aber in das Date Objekt ein, wenn das Datum gültig ist. Im Fehlerfall ist der Rückgabewertnull
.Beispiel
var datum = '1.1.1970'; alert(datum.toDate());
Diese Methode beruht auf der string2date()-Funktion
- String.ltrim() / String.rtrim() / String.trim([whitspace])
- Drei Funktionen, die den String um Leerzeichen, Tabs und Zeilenumbrüche am Anfang und Ende kürzen.
Der optionale bool'sche Parameter der Funktion String.trim() bewirkt, dass Wiederholungen von Leerzeichen in der Zeichenkette selbst gekürzt werden. - String.camelize()
- Nützlich für die Umwandlung von CSS Eigenschaften in die JS-Bezeichnung. z.b. border-color =>
borderColor
- String.stringIn()
- Syntax:
string.stringIn(text1, text2, ignoreCase)
sucht die Zeichenkette zwischen text1 und text2.
Ist der optionale 3. Parameter wahr, wird die Groß- und Kleinschreibung dabei ignoriert. - String.format()
- Syntax:
string.format(länge, zeichen, anordnung)
Gibt den String in einer festen Länge zurück.
Kurze Texte werden mit einem Zeichen aufgefüllt (default: Leerzeichen). Für die Eigenschaft der Anordnung sind drei Variabeln definiert LEFT(default), CENTER, RIGHT, die als Parameter benutzt werden können. - String.change()
- Syntax:
string.change(von, bis, str)
Ersetzt innerhalb der Zeichnekette von der Position
von
bisbis
mit der Zeichenkettestr
. - String.HTMLentities()
- Syntax:
string.HTMLentities()
Ersetzt alle Sonderzeichen mit HTML Ententies.
- String.stripTags()
- Syntax:
string.stripTags(num)
Entfertn alle HTML Tags aus der Zeichenkette.
- String.x()
- Syntax:
string.x(num)
Wiederholt die Zeichnekette
num
mal. - Eine Übersicht der aktuellen Methoden des String Objekts im Firefox.
- Prototypenbasierte Programmierung bei wikipedia
- OOP in JavaScript von Marc Tanner. Er beschreibt etwas ausführlicher wie prototype funktioniert und legt ebenfalls ein paar Beispiele zum erweitern von JS Objekten dazu.
- 31. August 2007 -- Wie kann man ein Array mischen? (2)
Ich hab mal wieder ein altes Stück Code ausgegraben,...
- 18. November 2011 -- LED Editor (1)
LED Scroller Chareditor Dieses Skript dient zum...
- 29. April 2009 -- Online Molmassen Rechner (29)
Ein kleines Javascript aus der Welt der Chemie. Der...
Download
weitere Informationen
ähnliche Artikel
5283 mal gelesen.
5 Kommentare
Leave a comment »
Seiten:
16. Mai 2009: 12:00
Sehr schön, sowas ist doch zu gebrauchen :-)
Habe ähnliches schonmal für eine getElementsByClass-Funktion im document-Objekt gemacht ^^
Document.prototype.getElementsByClass = function (className, tags)
{
if(tags == undefined) tags = ‚*‘;
var el = document.getElementsByTagName(tags);
var newEl = new Array();
for(i = 0; i < el.length; i++)
{
if(el[i].className == className) {
newEl[newEl.length] = el[i];
}
}
if(newEl.length == 0) newEl = false;
return newEl;
}
7. Juni 2009: 14:19
Hi Struppi,
ich denke, das man das Math-Objekt noch sinnvoll erweitern könnte zB um die xyz-Hyperbolicus-Funktionen:
Math.sinh = function(x) {
return 0.5*(Math.pow(Math.E,x) – Math.pow(Math.E,-x))
}
Math.cosh = function(x) {
return 0.5*(Math.pow(Math.E,x) + Math.pow(Math.E,-x))
}
Math.tanh = function(x) {
return Math.sinh(x)/Math.cosh(x);
}
Schöne Grüße
Micha
15. Juni 2009: 23:41
Grad hab ich deinen Kommentar aus der Spamliste befreit, keine Ahnung warum Aksimet dich da rein geschoben hat.
Wer solche Funktionen benötigt, für den bietet sich die Methode auf jeden Fall an. Wobei das Math Objekt hier eine etwas andere Rolle spielt. Es ist eher eine Sammlung nützlicher Funktionen, erweitert aber keine bestehenden Objekte, was ich mit dem Artikel demonstrieren wollte.
21. Juni 2009: 19:06
Hi Struppi,
stimmt, deswegen ist wohl der Weg über prototype nicht nötig.
Schöne Grüße
Micha
3. April 2011: 23:48
Schöner Blog übrigens. Bin zwar schon paar Jahre raus aus dem skripten, aber es ist immer wieder mal schön so eleganten Skriptcode zu sehen!
Das Neuste
Kategorien
am meisten gelesen
zuletzt kommentiert
Archiv
Wortwolke
Browser überwachung Drag&Drop LED String Tool Firefox Laufschrift Bugs about:config Datenschutz linux OOP google prototype Animation Wordpress Javascript LED Scroller Privatsphäre