Wordpress - theme path in javascript file

What you're looking for is wp_localize_script function.

You use it like this when enqueing script

wp_register_script( 'my-script', 'myscript_url' );
wp_enqueue_script( 'my-script' );
$translation_array = array( 'templateUrl' => get_stylesheet_directory_uri() );
//after wp_enqueue_script
wp_localize_script( 'my-script', 'object_name', $translation_array );

In your style.js, there is going to be:

var templateUrl = object_name.templateUrl;
...

These are the following two ways to add theme path in javascript file.

1) You can use wp_localize_script() suggested by wordpress in your functions.php file. This will create a Javascript Object in the header, which will be available to your scripts at runtime.

Example :

wp_register_script('custom-js',get_stylesheet_directory_uri().'/js/custom.js',array(),NULL,true);
wp_enqueue_script('custom-js');

$wnm_custom = array( 'stylesheet_directory_uri' => get_stylesheet_directory_uri() );
wp_localize_script( 'custom-js', 'directory_uri', $wnm_custom );

and can use in your js file as following :

alert(directory_uri.stylesheet_directory_uri); 

2) You can create a Javascript snippet that saves the template directory uri in a variable, and use it later as following: Add this code in header.php file before the js file in which you want to use this path. Example:

<script type="text/javascript">
var stylesheet_directory_uri = "<?php echo get_stylesheet_directory_uri(); ?>";
</script>

and can use in your js file as following :

alert(stylesheet_directory_uri);