JavaScript konwersja ciągów i liczb


89

Jak mogę wykonać następujące czynności w JavaScript?

  1. Połącz „1”, „2”, „3” w „123”

  2. Zamień „123” na 123

  3. Dodaj 123 + 100 = 223

  4. Ukryj 223 w „223”


42
Prawie wszystkie książki JavaScript, które czytałem, dotyczą tych zagadnień. Ale jest dobrze. Odpowiadanie na pytania jest tym, o co chodzi w StackOverflow. @Shadi Almosri - SO ma zasadę „nie bądź wredny”. Nie widzę sensu bagatelizowania ludzi, którzy zadają tutaj pytania, ponieważ o to chodzi w tym miejscu.
— Nosredna

4
@Nosredna: całkowicie rozumiem zadawanie pytań, nie kocham niczego bardziej niż odpowiadanie na nie, ale myślę, że pokazanie faktu, że próbowałeś jest lepszą etykietą niż po prostu oczekiwanie na odpowiedź, a także lepsze dla osobistego doświadczenia uczenia się. Tylko moja opinia, nie próbując być wrednym! :)
— Shadi Almosri

1
@Shadi, więc jak powinno zostać zadane pytanie? Z oświadczeniem, że już szukałeś odpowiedzi?
— Nosredna

1
Kiedy po raz pierwszy to zobaczyłem, wydało mi się to czymś w rodzaju pracy domowej, ale kiedy to ponownie przeczytałem, pomyślałem, że nie, wydawało mi się, że ktoś eksperymentuje z JavaScriptem i uzyskuje nieoczekiwane wyniki i chce to naprawić. To powiedziawszy, zastanawiam się, czy stackoverflow.com/faq może zawierać coś w rodzaju kodu honorowego dla studentów. Jesteśmy tu jakby globalnym uniwersytetem i nie sądzę, żeby szaleństwem było zastanawianie się, jaki zestaw etyki może być dla tego miejsca. A może to jest szalone. :-)
— artlung

6
@Shadi, cóż, z drugiej strony, pytanie i odpowiedź są w StackOverflow i miejmy nadzieję, że pomogą innym ludziom. Widzę, że ludzie ciągle tkwią w tym temacie, zwłaszcza jeśli pochodzą z języków takich jak Java. Jest powód, dla którego ludzie ciągle o to pytają - ponieważ MYŚLĄ, że wiedzą, jak działają wyrażenia w JavaScript, ale tak nie jest. Robią założenia oparte na doświadczeniach poza JS. Dlatego tak przydatne jest wypróbowanie kilku prostych testów z dodawaniem ciągów i liczb oraz wypróbowywaniem jednoargumentowych plusów i minusów.
— Nosredna

Odpowiedzi:


120

Chcesz się zapoznać z parseInt()i toString().

Przydatne w Twoim zestawie narzędzi będzie przyjrzenie się zmiennej, aby dowiedzieć się, jakiego typu jest– typeof:

<script type="text/javascript">
    /**
     * print out the value and the type of the variable passed in
     */

    function printWithType(val) {
        document.write('<pre>');
        document.write(val);
        document.write(' ');
        document.writeln(typeof val);
        document.write('</pre>');
    }

    var a = "1", b = "2", c = "3", result;

    // Step (1) Concatenate "1", "2", "3" into "123"
    // - concatenation operator is just "+", as long
    //   as all the items are strings, this works
    result = a + b + c;
    printWithType(result); //123 string

    // - If they were not strings you could do
    result = a.toString() + b.toString() + c.toString();
    printWithType(result); // 123 string

    // Step (2) Convert "123" into 123
    result = parseInt(result,10);
    printWithType(result); // 123 number

    // Step (3) Add 123 + 100 = 223
    result = result + 100;
    printWithType(result); // 223 number

    // Step (4) Convert 223 into "223"
    result = result.toString(); //
    printWithType(result); // 223 string

    // If you concatenate a number with a 
    // blank string, you get a string    
    result = result + "";
    printWithType(result); //223 string
</script>

Czy jest jakiś szczególny powód, dla którego umieszczasz to w tagach skryptu?
— Julix

@Julix Dla nowicjuszy w 2009 r. Zaglądam do pliku HTML, aby nauczyć się podstawowej koncepcji. Gdybym dziś odpowiedział na to świeżo, mógłbym zrobić to inaczej, ale może nie.
— artlung

53

Krok (1) Łączenie „1”, „2”, „3” z „123”

 "1" + "2" + "3"

lub

 ["1", "2", "3"].join("")

Metoda join łączy elementy tablicy w ciąg, umieszczając określony separator między elementami. W tym przypadku „separator” jest pustym ciągiem znaków ( "").


Krok (2) Zamień "123" na 123

 parseInt("123")

Przed ECMAScript 5 konieczne było przekazanie podstawy dla podstawy 10:parseInt("123", 10)


Krok (3) Dodaj 123 + 100 = 223

 123 + 100


Krok (4) Ukryj 223 w „223”

 (223).toString() 


Put It All Togther

 (parseInt("1" + "2" + "3") + 100).toString()

lub

 (parseInt(["1", "2", "3"].join("")) + 100).toString()

4
Ładny, jasny przykład. Poza tym chwała za dobrą formę - zawsze należy określać podstawę parseIntfunkcji .
— hotshot309

Włączenie radixa zdezorientowało mnie i przewinąłem do innej odpowiedzi, w której zostało to wyjaśnione. Edytowane w szybkim wyjaśnieniu, aby mieć rację w punkcie zamieszania.
— ArtOfWarfare

@ArtOfWarfare Dzięki, dobra edycja. Podstawa była konieczna w chwili udzielenia tej odpowiedzi. Obecnie mogę się spierać, żeby to pominąć. Od wersji ES5, którą obsługują wszystkie „nowoczesne” przeglądarki i Node.js, parseInt (<a string zawierający tylko 0-9>) zawsze używa podstawy 10.
— Patrick McElhaney,

Ciekawostka ... w oryginalnym JavaScript Netscape (około 1995) domyślną podstawą dla parseInt było 8 (chyba że ciąg zawierał 8 lub 9)
— Justin Ohms

27
r = ("1"+"2"+"3")           // step1 | build string ==> "123"
r = +r                      // step2 | to number    ==> 123
r = r+100                   // step3 | +100         ==> 223
r = ""+r                    // step4 | to string    ==> "223"

//in one line
r = ""+(+("1"+"2"+"3")+100);

Dzięki za szybką konwersję ciągów znaków -> liczb
— mcont

Jeśli zaznaczysz, że jest to liczba, czy nie, użyj parseInt (). Na przykład parseInt („”) to NaN, ale + „” to 0!
— greene

15

Te pytania pojawiają się cały czas z powodu systemu pisania w JavaScript. Ludzie myślą, że dostają liczbę, kiedy otrzymują ciąg liczb.

Oto kilka rzeczy, które możesz zobaczyć, a które wykorzystują sposób, w jaki JavaScript radzi sobie z łańcuchami i liczbami. Osobiście żałuję, że JavaScript nie użył innego symbolu niż + do łączenia ciągów.

Krok (1) Łączenie „1”, „2”, „3” z „123”

result = "1" + "2" + "3";

Krok (2) Zamień "123" na 123

result = +"123";

Krok (3) Dodaj 123 + 100 = 223

result = 123 + 100;

Krok (4) Zamień 223 na „223”

result = "" + 223;

Jeśli wiesz, DLACZEGO to działa, rzadziej będziesz mieć problemy z wyrażeniami JavaScript.


3
Właściwie uważam, że to wyjątkowo zła praktyka, ponieważ jest dość niejasna, jeśli chodzi o to, co się dzieje. Świadomość, że pewne operacje wpływają na niejawne rzutowanie, jest sztuczką i dobrze wiedzieć, ale wcale nie jest czytelna. Komunikacja jest wszystkim.
— annakata

1
Myślę, że ważne jest DOKŁADNE poznanie tych rzeczy, aby wiedzieć, co się dzieje, gdy czytasz kod. Większość JavaScript jest zwięzła, ponieważ jest przesyłana jako źródło, a mały kod może oznaczać obniżenie kosztów serwera.
— Nosredna

6
Powinieneś to jednak osiągnąć za pomocą narzędzi do kompresji, w tej formie jest to optymalizacja przy bardzo realnym koszcie utrzymania.
— annakata

6
Jednak wiedza o tych rzeczach pomogłaby przede wszystkim uniknąć pytania, którym był brak wiedzy o tym, jak JavaScript radzi sobie z ciągami i liczbami. To kwestia intelektualnej ciekawości. Co się stanie, gdy dodam liczbę do ciągu? Jak działa Unary Plus? Jeśli nie znasz odpowiedzi, tak naprawdę nie znasz JavaScript i pojawią się tego rodzaju pytania.
— Nosredna

11

Możesz to zrobić w ten sposób:

// step 1 
var one = "1" + "2" + "3"; // string value "123"

// step 2
var two = parseInt(one); // integer value 123

// step 3
var three = 123 + 100; // integer value 223

// step 4
var four = three.toString(); // string value "223"

16
Najlepszą praktyką byłoby dodanie parametru radix do funkcji parseInt (). więc parseInt (jeden, 10) zapewnia, że ​​cokolwiek na to rzucisz, nie zostanie źle zamienione.
— artlung

3
Zgoda. W przeciwnym razie wartości zaczynające się od 0będą widoczne jako liczby ósemkowe (podstawa-8) .
— hotshot309

1
Jeszcze bardziej nieoczekiwane, zaczynając od wartości 0, a następnie zawierający 8lub 9nie powiedzie się, co prowadzi do powrotu 0. EG, parseInt('034') = 28i parseInt('09') = 0.
— Robert Martin

9

Aby zamienić ciąg na liczbę, odejmij 0. Aby przekształcić liczbę w ciąg, dodaj „” (pusty ciąg).

5 + 1 daje 6

(5 + "") + 1 daje "51"

("5" - 0) + 1 daje 6


1
Poleganie na sztuczkach opartych na dziwactwach językowych, takich jak ten, może prowadzić do prawdziwej niejasności. np. „5” -0 faktycznie daje w wyniku liczbę 5, ale „5” +0 daje w wyniku ciąg „50”. (Tak, wiem, że minęło wiele lat i prawdopodobnie to trochę smutne, że w ogóle to czytałem.)
— Nick Rice,

6

parseInt jest niewłaściwy jak scanf:

parseInt ("12 małp", 10) to liczba o wartości '12'
+ „12 małp” to liczba o wartości „NaN”
Liczba („12 małp”) to liczba o wartości „NaN”


1

Poniżej znajduje się bardzo irytujący przykład tego, jak JavaScript może wpędzić Cię w kłopoty:

Jeśli spróbujesz po prostu parseInt()przekonwertować na liczbę, a następnie dodasz kolejną liczbę do wyniku, połączy dwa ciągi.

Możesz jednak rozwiązać problem, umieszczając wyrażenie sumujące w nawiasach, jak pokazano w poniższym przykładzie.

Wynik: ich suma wieku to: 98 lat; Ich suma wieku NIE wynosi: 5048 lat

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
function Person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}

var myFather = new Person("John", "Doe", "50", "blue");
var myMother = new Person("Sally", "Rally", 48, "green");

document.getElementById("demo").innerHTML = "Their age sum is: "+
 (parseInt(myFather.age)+myMother.age)+"; Their age sum is NOT: " +
 parseInt(myFather.age)+myMother.age; 
</script>

</body>
</html>


0

Najprościej jest, gdy chcesz, aby liczba całkowita była napisem

var a,b, c;
a = 1;
b = a.toString(); // This will give you string

Teraz ze zmiennej b, która jest typu string, możemy pobrać liczbę całkowitą

c = b *1; //This will give you integer value of number :-)

Jeśli chcesz sprawdzić powyżej to liczba. Jeśli nie jesteś pewien, czy b zawiera liczbę całkowitą, możesz użyć

if(isNaN(c*1)) {
  //NOt a number
}
else //number

0

Możemy to zrobić, używając jednoargumentowego operatora plus, aby najpierw przekonwertować je na liczby i po prostu dodać. patrz poniżej: -

var a = "4";
var b = "7";
var sum = +a + +b; 
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.