string javascript 入門

      2017/04/24

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>

実行結果は3です。

見た目では分かりませんが<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>

実行結果は3です。

文字が等幅文字になります。

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>

実行結果は3です。

文字がイタリック体になります。

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です。

PR



 - javascript 入門

Translate »