1. ホーム
  2. ジャバスクリプト

JavaScriptグローバル関数解説

2022-02-23 03:20:52
<パス

JavaScriptグローバル関数


前書き

<フォント 今日は、jsのグローバル関数で渡されたアルゴリズムに基づき、レンガを移動しながらページ上でアルゴリズムが行われていました eval() 本日は、今後つまづかないように、ブログ主がJavaScriptのグローバル関数を整理していきますので、ご参考になればと思います。

I. JavaScriptのグローバル関数とは何ですか?

<テーブル 機能 説明 decodeURI() エンコードされたURIをデコードします。 decodeURIComponent() エンコードされたURIコンポーネントをデコードする。 エンコードURI() 文字列をURIとしてエンコードします。 encodeURIComponent() 文字列をURIコンポーネントにエンコードします。 エスケープ() 文字列をエンコードする。 eval() JavaScriptの文字列を計算し、スクリプトコードとして実行します。 isFinite() 値が無限に大きな数であるかどうかを調べます。 isNaN() 値が数値であるかどうかを調べます。 番号() オブジェクトの値を数値に変換します。 parseFloat() 文字列を解析し、浮動小数点数を返します。 parseInt() 文字列を解析し、整数を返します。 文字列() オブジェクトの値を文字列に変換します。 unescape() escape()でエンコードされた文字列をデコードします。

第二に、JavaScriptのグローバル関数の詳細?

2.1.Eval()

2.1.1. 例1

まず例を見てください。

eval("x=10;y=20;document.write(x*y)");
document.write("

" + eval("2+2")); document.write("
" + eval(x+17));

結果

200
4
27

特殊な使い方{}。

document.write("

" + eval{3+3}));

これは:6を返し、{}は実は()と同じであることがわかります。

//{}/2 is not supported
document.write("

" + eval{3+3}/2)); //() is fine document.write("
" + eval(3+3)/2)); //If {} also wants to do this kind of calculation, it's fine as follows: document.write("
" + eval{(3+3)/2}));

2.1.2. 例2

他の場合のeval()が返す結果を見てみましょう。

eval("2+3") // returns 5
var myeval = eval; // may throw an EvalError exception
myeval("2+3"); // may throw an EvalError exception


eval()の引数が正当なものであるかどうかは、次のコードで確認できます。

try {
  alert("Result:" + eval(prompt("Enter an expression:","")));
}catch(exception) {
  alert(exception);
}


2.1.3. 例3 (JSON文字列のパース)

2.1.3.1. eval 構文解析関数。

JSONでは関数を含めることはできませんが、関数を文字列として格納し、後で文字列を関数に変換することは可能です。

var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www. runoob.com"}';
var obj = JSON.parse(text);
obj.alexa = eval("(" + obj.alexa + ")");
 
document.getElementById("demo").innerHTML = obj.name + " " Alexa Rank: " + obj.alexa();

  // Method one for converting a JSON string to a JS object
    var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
    document.write(obj.name + "

"); // method two of converting JSON strings to JS objects //JSON format string var test1 = '{"name":"qlq","age":25}'; var obj2 = eval("(" + test1 + ")"); //must have parentheses document.write(obj2.name + "
" + obj2.age);

2.1.3.2. JSON文字列をオブジェクトに変換するための2つのメソッド

alert(eval("{}"); // return undefined
alert(eval("({})"); // return object[Object]


結果

ラノベ
qlq
25

なぜここでevalを追加しなければならないのか eval("(" + test1 + ")")//"?

その理由は、evalそのものにある。jsonは"{}"で始終するため、JSではブロック文として扱われるため、強制的に式に変換する必要があるのです。

括弧の目的は、JavaScriptのコードを処理する際に、eval関数が括弧内の式を文として実行するのではなく、強制的にオブジェクトに変換するためです。例えば、オブジェクトリテラル {} が括弧で囲まれていない場合、eval は中括弧を JavaScript ブロックの開始と終了のマーカーとして認識し、{} は空のステートメントとして実行されます。そのため、以下の2つの実行結果は異なるものとなります。

(function()) {}();

この書き方については、JSのいたるところで見ることができます。

例えば alert(dataObj.root.length);//output the number of child objects of root $.each(dataObj.root,fucntion(idx,item){ if(idx==0){ return true; } // output the name and value of each root child object alert("name:"+item.name+",value:"+item.value); }) クロージャ演算を行う場合など。

$.getJSON()

注:一般的なjsのjsonオブジェクトの生成は、$.each()メソッドをfor文に置き換えるだけで、他のすべては同じままです。

2.1.3.3. サーバから返されるJSON文字列について、jquery非同期リクエストでタイプ(通常はこの設定プロパティ)を"json"に設定するか、または eval() メソッドを使用してサーバーから返送されたものを取得する場合は $.getJSON なぜなら、結果はすでに json オブジェクトになっているので、そのオブジェクトを直接呼び出すだけでよいからです。 $.getJSON("http://www.phpzixue.cn/",{param:"gaoyusi"},function(data){ //here the returned data is already a json object //The following other operations are the same as the first case $.each(data.root,function(idx,item){ if(idx==0){ return true;//same as countinue, return false with break } alert("name:"+item.name+",value:"+item.value); }); }); メソッドをデータの扱い方の例として挙げています。

{"key":"vslue"}

ここで特記すべきは、方法1のeval()メソッドは文字列(おそらくjsスクリプト)を動的に実行するため、システムセキュリティ上の問題が発生しやすいということです。そこで、eval()を回避するサードパーティのクライアントサイドスクリプトライブラリ、例えばJSON in JavaScriptを利用するとよいでしょう。JavaScriptでは、3k以下のスクリプトのライブラリを提供しています。

2.1.3.4. 追記:eval()でパースされるJSONのキーは、""がなくても大丈夫です。

通常のJSONのキーはダブルクォートで囲む必要があり、これは次のようなものです。 eval("("+json+")") の形式ですが、もし {key:"value"} decodeURI() という文字列をパースしてJSONにすると、そのJSONを

encodeURI()

2.2. decodeURI() および decodeURIComponent() - デコード用関数

const aaa = '#$ ¥%23ccc/' console.log(encodeURI(aaa)); // #$%20%EF%BF%A5%2523ccc/ console.log(decodeURI(aaa)); // #$ ¥%23ccc/ console.log(encodeURIComponent(aaa)); // %23%24%20%EF%BF%A5%2523ccc%2F console.log(decodeURIComponent(aaa)); // #$ ¥#ccc/ export function getQueryObject(url) { url = url || window.location.href const search = url.substring(url.lastIndexOf('?') + 1) const obj = {} const reg = /([^? &=]+)=([^? &=]*)/g search.replace(reg, (rs, $1, $2) => { const name = decodeURIComponent($1) let val = decodeURIComponent($2) val = String(val) obj[name] = val return rs }) return obj } エンコードされたURIをデコードするための関数

として。

<html>
<body>

<script type="text/javascript">

document.write(encodeURI("http://www.w3school.com.cn")+ "

") document.write(encodeURI("http://www.w3school.com.cn/My first/")+ "
") document.write(encodeURI(",/? :@&=+$#")) </script> </body> </html>

アドレスバーのパラメータを取得する場合、通常はこのように関数で囲みます。

<script type="text/javascript">

document.write(encodeURIComponent("http://www.w3school.com.cn"))
document.write("

") document.write(encodeURIComponent("http://www.w3school.com.cn/p 1/")) document.write("
") document.write(encodeURIComponent(",/? :@&=+$#")) </script>

encodeURI() および encodeURIComponent() - エンコード 関数

encodeURI()。
構文

<ブロッククオート

エンコードURI(URIstring)
パラメータの説明
URIstring 必須。エンコードするURIなどのテキストを含む文字列。
戻り値
URIstring のコピーで、一部の文字は 16 進数のエスケープシーケンスに置き換えられます。
説明
このメソッドは、ASCII文字と数字をエンコードせず、以下のASCII句読点もエンコードしません: - _ . ! ~ * ' ( ).
このメソッドの目的は URI を完全にエンコードすることなので、 encodeURI() 関数は URI の中で特別な意味を持つ以下の ASCII 句読点をエスケープしません: ;/? という句読点はエスケープされません。

encodeURIComponent() :

構文
encodeURIComponent(URIstring)
パラメータの説明
URIstring 必須。エンコードするURIコンポーネントやその他のテキストを含む文字列。
戻り値
URIstring のコピーで、一部の文字は 16 進数のエスケープシーケンスに置き換えられます。
説明
このメソッドは、ASCII文字と数字をエンコードせず、以下のASCII句読点もエンコードしません: - _ . ! ~ * ' ( ).
その他の文字(URIの構成要素を区切るための句読点である : ;/???? &=+$,# など)は、1つまたは複数の16進エスケープシーケンスで置き換えられます。
ヒントとコメント
ヒント: encodeURIComponent() 関数と encodeURI() 関数の違いに注意しましょう。前者はその引数が URI の一部 (プロトコル、ホスト名、パス、クエリー文字列など) であると仮定している点です。したがって、encodeURIComponent()関数は、URIのさまざまな部分を区切るために使用される句読点をエスケープします。

enCodeURIの例です。

decodeURI()

出力結果です。

http://www.w3school.com.cn
http://www.w3school.com.cn/My%20first/
,/? : を使用します。

URL全体をエンコードし、URL固有の識別子はトランスコードされません。

encodeURIComponent() の例です。

decodeURIComponent()

出力結果です。

http%3A%2F%2Fwww.w3school.com.cn
http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F
%2C%2F%3F%3A%40%26%3D%2B%24%23

パラメータはURLでもあり、エンコードしないとURLのジャンプ全体に影響が出るため、URLのパラメータをエンコードしてください。

2.4. escape()

<ブロッククオート

構文
エスケープ(文字列)
パラメータの説明
string 必須。エスケープまたはエンコードされる文字列。
戻り値
エンコードされた文字列のコピー。一部の文字が16進数のエスケープシーケンスに置き換えられている。

説明
このメソッドは、ASCII文字と数字をエンコードせず、以下のASCII句読点もエンコードしない。* @ - _ + . / . その他の文字は、エスケープシーケンスで置き換えられます。
注:ECMAScript v3ではこのメソッドの使用に反対しており、アプリケーションでは <script type="text/javascript"> document.write(escape("Visit W3School!") + "
") document.write(escape(""?! =()#%&")) </script>
Number.MIN_VALUE に置き換えます。

Number.MAX_VALUE

結果

訪問%20W3School%21
%3F%21%3D%28%29%23%25%26

2.5.isFinite()

引数が最小値と最大値の間にあるかどうかを判定し、その間にある場合はtrueを、それ以外の場合はfalseを返します。
ECMAScript で表現できる最小の値を infinity であり、ほとんどのブラウザでは :5e-324 である。 Infinity は,ほとんどのブラウザでは 1.7976931348623157e+308 であり,値が範囲外の場合は自動的に特殊な値に変換されます。 -Infinity <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var num = 1123; alert(num);//1123 var num1 = Number.MAX_VALUE+Number.MAX_VALUE; alert(num1);//Infinity alert(isFinite(num));//true alert(isFinite(num1));//false </script> </head> <body> </body> </html> 値が範囲外の場合は、自動的に特殊な値に変換され、その前に isNaN() に変換され、それが負の数である場合は

isNaN

は、値が通常の値の範囲内にあるかどうかを判断するために使用することができます

2.6. isNaN()

定義と使用法
//=> Syntax: isNaN([value]) var num=12; isNaN(num); //->check if the value stored in the num variable is a non-valid number false isNaN('13') =>false isNaN('Helloya') =>true isNaN(true) =>false isNaN(false) =>false isNaN(null) =>false isNaN(undefined) =>true isNaN({age:9}) =>true isNaN([12,23]) =>true isNaN([12]) =>false isNaN(/^$/) =>true isNaN(function(){}) =>true [string to number]. Number('13') ->13 Number('13px') ->NaN If any non-valid numeric character is present in the current string, the result is NaN Number('13.5') ->13.5 can recognize decimals [Boolean to number] Number(true) ->1 Number(false) ->0 [Other] Number(null) ->0 Number(undefined) ->NaN 関数は、その引数が非数値であるかどうかをチェックするために使用されます。

parseInt / parseFloat 使用法:現在値が有効な数値でないかをチェックし、有効な数値でない場合はtrueを、有効な数値の場合はfalseを返す。

parseInt('13.5px') =>13
parseFloat('13.5px') =>13.5
parseInt('width:13.5px') =>NaN 


2.6.1. isNaN検出のメカニズム:まず検出される現在の値が数値型であることを確認し、数値型でない場合は、ブラウザがデフォルトで値を数値型に変換する

function myIsNaN(value) {
  return typeof value === 'number' && isNaN(value);
}


参照データ型の値を数値に変換する:まず参照値のtoStringを呼び出して文字列にし、次に文字列のNumberを呼び出して数値にする

2.6.2. 現在検出されている値がすでに有効な数値である数値型はtrueではなくfalseを返す(数値型ではNaNのみ有効な数値ではない、残りは有効な数値である)。

function myIsNaN(value) { return value ! == value; } Number(obj) は、その はNumberと同等です。 これは、他の型の値を数値型に変換するためのものでもあります。
Numberとの違いは、文字列の変換解析にある

数字。数字が有効でない場合、NaNとなります。
parseInt: 文字列の整数部分を解析し、parseFloat は文字列の小数部分(浮動小数点)を解析します。

var test1= new Boolean(true);
var test2= new Boolean(false);
var test3= new Date();
var test4= new String("999");
var test5= new String("999 888");

document.write(Number(test1)); output 1
document.write(Number(test2)); output 0
document.write(Number(test3)); output 1256657776588
document.write(Number(test4)); output 999
document.write(Number(test5)); output NaN


文字列の左端から始まって有効な数値文字を探し出し、数値に変換するが、有効でない数値文字に出会うと検索を終了する。
したがって、isNaNを使用する前にデータ型を決定しておくとよいでしょう。

var a="3.14159";

var a2=Number(a);// the result is 3.14159


より確実にNaNを判断するには、この「NaNは自分自身と等しくない唯一の値である」という特徴を利用するのがよいでしょう。

var b=3.14159

var b2=Number(b);// the result is 3.14159


2.7.数字()

parseInt(3.14159);//3 parameter is a numeric value parseInt("3.14159");//3 parameter is a string 引数オブジェクトの値を数値に変換する、オブジェクトに依存しないグローバル関数です。

parseFloat(3.14159)//3.14159
parseFloat("3.14159")//3.14159
parseFloat(5)//5
parseFloat("5");//5


1. 引数は文字列

<script>

var test1 = new Boolean(1);
var test2 = new Boolean(0);
var test3 = new Boolean(true);
var test4 = new Boolean(false);
var test5 = new Date();
var test6 = new String("999 888");
var test7 = 12345;

document.write(String(test1)+ "

"); document.write(String(test2)+ "
"); document.write(String(test3)+ "
"); document.write(String(test4)+ "
"); document.write(String(test5)+ "
"); document.write(String(test6)+ "
"); document.write(String(test7)+ "
"); </script>

2. パラメータは数値

var str="Need tips? Visit RUNOOB!";
var str_esc=escape(str);
document.write(str_esc + "

") document.write(unescape(str_esc))

2.8. parseInt() および parseFloat()

1. parseInt()

parseInt() 関数は、文字列を解析して整数を返します。先頭と末尾に空白があってもかまいません。引数が数値の場合、小数部分を取り除き、整数の部分を返します。

parseInt(3.14159);//3 parameter is a numeric value
parseInt("3.14159");//3 parameter is a string


2. parseFloat()

関数は文字列を解析し、浮動小数点数を返します。引数は数値で、引数が分数の場合は分数を、整数の場合は整数の数値を返します

parseFloat(3.14159)//3.14159
parseFloat("3.14159")//3.14159
parseFloat(5)//5
parseFloat("5");//5


string() - toString() と同じです。

異なるオブジェクトを文字列に変換する。

<script>

var test1 = new Boolean(1);
var test2 = new Boolean(0);
var test3 = new Boolean(true);
var test4 = new Boolean(false);
var test5 = new Date();
var test6 = new String("999 888");
var test7 = 12345;

document.write(String(test1)+ "

"); document.write(String(test2)+ "
"); document.write(String(test3)+ "
"); document.write(String(test4)+ "
"); document.write(String(test5)+ "
"); document.write(String(test6)+ "
"); document.write(String(test7)+ "
"); </script>

上記の例の出力です。


虚偽

虚偽
金曜日 Aug 27 2021 16:31:26 GMT+0800 (CST)
999 888
12345

2.10.unescape()

機能 機能: escape()でエンコードされた文字列をデコードする。この関数は、%xxと%uxxxx(xは16進数の数字)の形の文字の並びを見つけることで動作します。
このような文字列をデコードする場合は、Unicode 文字の \u00xx および \uxxxx に置き換えてください。
Tip:ECMAScript v3 では unescape() 関数が標準から削除され、その使用に反対しているので、 decodeURI() と decodeURIComponent() に置き換える必要があります。

var str="Need tips? Visit RUNOOB!";
var str_esc=escape(str);
document.write(str_esc + "

") document.write(unescape(str_esc))