String javascript 入門
String
stringオブジェクトについて解説します。
宣言
変数名 = new String(値);
代入
変数名 = 値;
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“3″);
alert(str1);
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果は3です。
String constructor プロパティ
constructor プロパティはコンストラクタを参照します。
変数名.constructor
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“3″);
alert(str1.constructor);
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果はfunction String() { [native code] }が返します。
String length プロパティ
String length プロパティは文字列の長さを参照・設定できます。
文字列の長さ
変数名.length
文字列の長さを設定する
変数名.length = 値;
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“3″);
alert(str1.length);
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果は1です。
prototype プロパティ
prototype プロパティは配列にプロパティを作成する。
String.prototype.プロパティ名 = 値；
String anchor メソッド
anchorのneme属性を設定できます。
変数名(“アンカーネーム”);
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“3”);
document.write(str1.anchor(“anchorname”));
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果は３です。
見た目では分かりませんが<A>のneme属性がanchornameが設定されています。
String big メソッド
bigで文字が一回り大きくなります。
変数名.big();
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“3″);
document.write(str1.big());
alert(str1.anchor);
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果は3です。
bigでひと回り文字が大きくなってます。
String blink メソッド
文字を点滅します。
ブラウザの独自仕様でhtml5で廃止されたので使用しなくていいでしょう。
String bold メソッド
文字が太字になります。
変数名.bold()
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“3″);
document.write(str1.bold());
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果は3です。
文字が太字になります。
String charAt メソッド
charAtは文字列の位置から文字を習得します。
変数名.charAt(抽出する位置)
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“abcdef”);
document.write(str1.charAt(1));
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果はbです。
String concat メソッド
concatは文字を連結させる。
変数名.concat(連結文字)
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“abcdef”);
document.write(str1.concat(1));
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果はabcdef1です。
String find メソッド
IEでも非対応なので使用しなくていいですね。
String fixed メソッド
文字が等幅文字になります。
変数名.fixed()
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“3″);
document.write(str1.fixed());
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果は３です。
文字が等幅文字になります。
String fontsize メソッド
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“3″);
document.write(str1.fontsize (72));
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果は3です。
フォントサイズが72ポイントになります。
String fontcolor メソッド
変数名.fontcolor(色)；
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“3”);
document.write(str1.fontcolor(“red”));
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果は3です。
文字が赤くなってます。
String indexOf メソッド
indexOfは検索位置から右に検索する。
変数名.indexOf(検索文字,検索位置)
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“abcdef”);
document.write(str1.indexOf(“c”,1));
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果は2です。
String italics メソッド
変数名.italics())
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“3″);
document.write(str1.italics());
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果は３です。
文字がイタリック体になります。
String lastIndexOf メソッド
lastIndexOfは検索位置から左に検索します。
変数名.lastIndexOf(検索文字,検索位置)
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“abcdef”);
document.write(str1.lastIndexOf(“c”,5));
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果は2です。
String link メソッド
リンクができます。
変数名1.link
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“A”);
document.write(str1.link());
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果はAです。
リンクができてます。
String match メソッド
matchは検索の指定を正規表現で指定します。
変数名.match(検索する正規表現)
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“abcdef”);
document.write(str1.match(/a/));
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果はaです。
String replace メソッド
replaceは文字を検索して置き換え文字で検索文字を置き換える。
str1.replace (検索文字,置き換え文字)
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“abcdef”);
document.write(str1.replace (“e”,”z”));
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果はabcdzfです。
String search メソッド
searchは検索文字列を検索してインデックスを返す。
要素がない場合は-1を返す。
変数名.search (検索文字)
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“abcdef”);
document.write(str1.search (“e”));
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果は4です。
String slice メソッド
sliceは文字を抽出します。
変数名.slice(開始位置,終了位置)
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“abcdef”);
document.write(str1.slice(1,3));
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果はbcです。
String small メソッド
文字が小さくなります。
変数名.small()
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“3″);
document.write(str1.small());
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果は3です。
文字が小さくなってます。
String split メソッド
splitは区切り文字で分割して要素数の配列を取得する。
第二引数の要素数がない時は全て取得する。
変数名.split(区切り文字,要素数)
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“a/b/c/d/e/f”);
document.write(str1.split(“/”,5));
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果はa,b,c,d,eです。
String strike メソッド
文字が取り消し線になる。
変数名.strike()
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“3″);
document.write(str1.strike());
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果は3です。
文字が取り消し線になってます。
String sub メソッド
変数名.sub()
文字が下付き文字になります。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“3″);
document.write(str1.sub());
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果は3です。
文字が下付き文字になりました。
String substr メソッド
substrを抽出する。
変数名.substr(開始位置,文字数)
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“abcdef”);
document.write(str1.substr(1,3));
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果はbcdです。
String substring メソッド
substringは文字を抽出する。
str1.substring(開始位置,終了位置)
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“abcdef”);
document.write(str1.substring(1,3));
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果はbcです。
String sup メソッド
文字が上付き文字になります。
変数名.sup()
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“3″);
document.write(str1.sup());
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果は3です。
String toLowerCase メソッド
アルファベットが小文字になります。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“A”);
document.write(str1.toLowerCase());
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果はaです。
String toUpperCase メソッド
アルファベットが大文字になります。
変数名.toUpperCase()
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“a”);
document.write(str1.toUpperCase());
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果はAです。
String valueOf メソッド
valueOf()は文字の値を取得する。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
str1 = new String(“abcdef”);
document.write(str1.valueOf());
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果はabcdefです。